HarshCasper · ranimanya · Mar 16, 2022 · Mar 16, 2022
diff --git a/Pinterest_extension/board.html b/Pinterest_extension/board.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles/pinterest-mock/normalize.css">
+    <link rel="stylesheet" href="./styles/pinterest-mock/pin_styles.css">
+    <link rel="stylesheet" href="./styles/pinterest-mock/modal_styles.css">
+    <link rel="stylesheet" href="./styles/pinterest-mock/board.css">
+</head>
+
+<body>
+    <div class="navigation_bar">
+        <div class="pint_mock_icon_container add_pin">
+            <img src="./images/pinterest-mock/add.png" alt="add_pin" class="pint_mock_icon">
+        </div>
+    </div>
+
+    <div class="pin_container"></div>
+
+    <div class="add_pin_modal">
+        <div class="add_pin_container">
+            <div class="side" id="left_side">
+                <div class="section1">
+                    <div class="pint_mock_icon_container">
+                        <img src="./images/pinterest-mock/ellipse.png" alt="edit" class="pint_mock_icon">
+                    </div>
+                </div>
+
+                <div class="section2">
+                    <label for="upload_img" id="upload_img_label">
+                        <div class="upload_img_container">
+                            <div id="dotted_border">
+                                <div class="pint_mock_icon_container">
+                                    <img src="./images/pinterest-mock/up-arrow.png" alt="upload_img"
+                                        class="pint_mock_icon">
+                                </div>
+                                <div>Click to upload</div>
+                                <div>Recommendation: Use high-quality .jpg files less than 20MB</div>
+                            </div>
+                        </div>
+                        <input type="file" name="upload_img" id="upload_img">
+                    </label>
+
+                    <div class="modals_pin">
+                        <div class="pin_image">
+                             <img src="" alt="pin_image">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="section3">
+                    <div class="save_from_site">
+                        <span style="pointer-events: none;">Save From Site</span>
+                        <input placeholder="Past a URL to an image" type="text" name="save_from_site_input"
+                            id="save_from_site_input">
+                        <div class="upload_image_url">Upload</div>
+                        <div class="cancel_image_url">Cancel</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="side" id="right_side">
+                <div class="section1">
+                    <div class="select_size">
+                        <select name="pin_size" id="pin_size">
+                            <option value="" disabled selected>Select</option>
+                            <option value="small">small</option>
+                            <option value="medium">medium</option>
+                            <option value="large">large</option>
+                        </select>
+                        <div class="save_pin">Save</div>
+                    </div>
+                </div>
+
+                <div class="section2">
+                    <input placeholder="Add your title" type="text" class="new_pin_input" id="pin_title">
+                    <input placeholder="Tell everyone what your Pin is about" type="text" class="new_pin_input"
+                        id="pin_description">
+                    <input placeholder="Add a destination link" type="text" class="new_pin_input" id="pin_destination">
+                    <input placeholder="Add a title for your link" type="text" class="new_pin_input"
+                        id="pin_destination_title">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="./scripts/pinterest-mock/board.js"></script>
+</body>
+
+</html>
diff --git a/Pinterest_extension/images/icon-128x128.png b/Pinterest_extension/images/icon-128x128.png
diff --git a/Pinterest_extension/images/icon-16x16.png b/Pinterest_extension/images/icon-16x16.png
diff --git a/Pinterest_extension/images/icon-32x32.png b/Pinterest_extension/images/icon-32x32.png
diff --git a/Pinterest_extension/images/icon-48x48.png b/Pinterest_extension/images/icon-48x48.png
diff --git a/Pinterest_extension/images/pinterest-mock/add.png b/Pinterest_extension/images/pinterest-mock/add.png
diff --git a/Pinterest_extension/images/pinterest-mock/ellipse.png b/Pinterest_extension/images/pinterest-mock/ellipse.png
diff --git a/Pinterest_extension/images/pinterest-mock/send.png b/Pinterest_extension/images/pinterest-mock/send.png
diff --git a/Pinterest_extension/images/pinterest-mock/up-arrow.png b/Pinterest_extension/images/pinterest-mock/up-arrow.png
diff --git a/Pinterest_extension/images/pinterest-mock/upper-right-arrow.png b/Pinterest_extension/images/pinterest-mock/upper-right-arrow.png
diff --git a/Pinterest_extension/manifest.json b/Pinterest_extension/manifest.json
@@ -0,0 +1,28 @@
+{
+    "name": "Pinterest Chrome Extension",
+    "description": "Save your ideas so that you can get back to them later",
+    "version": "0.1.0",
+    "manifest_version": 2,
+    "icons": {
+        "16": "./images/icon-16x16.png",
+        "32": "./images/icon-32x32.png",
+        "48": "./images/icon-48x48.png",
+        "128": "./images/icon-128x128.png"
+    },
+    "background": {
+        "scripts": ["./scripts/background.js"]
+    },
+    "options_page": "./options.html",
+    "browser_action": {
+        "default_popup": "./popup.html"
+    },
+    "permissions": [
+        "tabs",
+        "storage",
+        "unlimitedStorage",
+        "https://*/*png",
+        "https://*/*jpg",
+        "https://*/*jpeg",
+        "https://*/*gif"
+    ] 
+}
diff --git a/Pinterest_extension/options.html b/Pinterest_extension/options.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <h1>I'm the options</h1>
+</body>
+
+</html>
diff --git a/Pinterest_extension/popup.html b/Pinterest_extension/popup.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles/popup_styles.css">
+</head>
+
+<body>
+    <div class="container">
+        <button id="add_pin">Add Pin</button>
+        <button id="my_board">My Board</button>
+    </div>
+
+    <script src="./scripts/popup_script.js"></script>
+</body>
+
+</html>
diff --git a/Pinterest_extension/scripts/background.js b/Pinterest_extension/scripts/background.js
@@ -0,0 +1,67 @@
+let recent_tab_id = null,
+    new_pin_data = {};
+
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.message === 'add_pin') {
+        new_pin_data = { ...request.payload };
+
+        chrome.tabs.create({
+            active: true,
+            url: './board.html'
+        }, tab => recent_tab_id = tab.id);
+    } else if (request.message === 'board_loaded') {
+        if (sender.tab.id === recent_tab_id) {
+            sendResponse({
+                message: 'success',
+                payload: new_pin_data
+            });
+
+            recent_tab_id = null;
+            new_pin_data = {};
+        } else {
+            sendResponse({ message: 'fail' });
+        }
+
+        return true;
+    } else if (request.message === 'open_board') {
+        chrome.tabs.create({
+            active: true,
+            url: './board.html'
+        });
+    } else if (request.message === 'save_pin') {
+        chrome.storage.local.get('pins', data => {
+            if (chrome.runtime.lastError) {
+                sendResponse({ message: 'fail' });
+                return;
+            }
+
+            chrome.storage.local.set({
+                pins: data.pins ? [...data.pins, request.payload] : [request.payload]
+            }, () => {
+                if (chrome.runtime.lastError) {
+                    sendResponse({ message: 'fail' });
+                    return;
+                }
+
+                sendResponse({ message: 'success' });
+            });
+        });
+
+        return true;
+    } else if (request.message === 'get_pins') {
+        chrome.storage.local.get('pins', data => {
+            if (chrome.runtime.lastError) {
+                sendResponse({ message: 'fail' });
+                return;
+            }
+
+            sendResponse({
+                message: 'success',
+                payload: data.pins ? data.pins : []
+            });
+        });
+
+        return true;
+    }
+});