├── .nvmrc
├── .gitignore
├── src
    ├── icons
    │   ├── icon.png
    │   ├── icon@2x.png
    │   ├── pinboard-icon_128.png
    │   ├── pinboard-icon_32.png
    │   ├── pinboard-icon_64.png
    │   ├── pinboard.svg
    │   └── pinboard_inactive.svg
    ├── page-action_vue.js
    ├── converters
    │   └── postConverter.js
    ├── pageAction
    │   ├── pageAction-style.css
    │   └── index.html
    ├── options
    │   ├── script.js
    │   └── index.html
    ├── content_script.js
    ├── extension-page_script.js
    ├── manifest.json
    ├── services
    │   └── pinboardService.js
    ├── styles
    │   └── global.css
    ├── background_script.js
    └── components
    │   └── AddBookmark
    │       └── AddBookmark.vue
├── .prettierrc
├── jsconfig.json
├── README.md
├── package.json
└── webpack.config.js


/.nvmrc:
--------------------------------------------------------------------------------
1 | lts/*
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | package-lock.json
3 | /dist/
4 | .vscode
5 | /web-ext-artifacts/


--------------------------------------------------------------------------------
/src/icons/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariofink/epic-pinboard/HEAD/src/icons/icon.png


--------------------------------------------------------------------------------
/src/icons/icon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariofink/epic-pinboard/HEAD/src/icons/icon@2x.png


--------------------------------------------------------------------------------
/src/icons/pinboard-icon_128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariofink/epic-pinboard/HEAD/src/icons/pinboard-icon_128.png


--------------------------------------------------------------------------------
/src/icons/pinboard-icon_32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariofink/epic-pinboard/HEAD/src/icons/pinboard-icon_32.png


--------------------------------------------------------------------------------
/src/icons/pinboard-icon_64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariofink/epic-pinboard/HEAD/src/icons/pinboard-icon_64.png


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": true,
4 |   "singleQuote": false,
5 |   "tabWidth": 2,
6 |   "trailingComma": "es5"
7 | }
8 | 


--------------------------------------------------------------------------------
/src/icons/pinboard.svg:
--------------------------------------------------------------------------------
1 | <svg height="1000" width="1000" xmlns="http://www.w3.org/2000/svg" fill="#45A1FF"><path d="M0 323l316-323l0 123l301 277 187-46-195 208 391 438-444-392-188 192 30-169-255-316z"/></svg>
2 | 
3 | 


--------------------------------------------------------------------------------
/src/icons/pinboard_inactive.svg:
--------------------------------------------------------------------------------
1 | <svg height="1000" width="1000" xmlns="http://www.w3.org/2000/svg" fill="#BABABA"><path d="M0 323l316-323l0 123l301 277 187-46-195 208 391 438-444-392-188 192 30-169-255-316z"/></svg>
2 | 
3 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "checkJs": false,
 5 |   },
 6 |   "include": [
 7 |     "./*.js",
 8 |     "./src/**/*.js"
 9 |   ],
10 |   "exclude": [
11 |     "node_modules",
12 |     "web-ext-artifacts",
13 |     "dist"
14 |   ],
15 |   "module": "es6"
16 | }


--------------------------------------------------------------------------------
/src/page-action_vue.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import AddBookmark from "./components/AddBookmark/AddBookmark.vue";
 3 | 
 4 | console.log("ADD", AddBookmark);
 5 | new Vue({
 6 |   el: "#pinboardAddBookmark",
 7 |   render(h) {
 8 |     return h("AddBookmark");
 9 |   },
10 |   components: { AddBookmark },
11 | });
12 | 


--------------------------------------------------------------------------------
/src/converters/postConverter.js:
--------------------------------------------------------------------------------
 1 | export default function convertPost(post) {
 2 |   return {
 3 |     description: post.attributes.description,
 4 |     extended: post.attributes.extended,
 5 |     hash: post.attributes.hash,
 6 |     href: post.attributes.href,
 7 |     tag: post.attributes.tag,
 8 |     time: post.attributes.time,
 9 |   };
10 | }
11 | 


--------------------------------------------------------------------------------
/src/pageAction/pageAction-style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   width: 300px;
 3 |   overflow-x: hidden;
 4 | }
 5 | 
 6 | form label {
 7 |   display: block;
 8 | }
 9 | 
10 | form label.inline {
11 |   display: inline-block;
12 |   vertical-align: middle;
13 | }
14 | 
15 | form input[type="checkbox"] {
16 |   vertical-align: middle;
17 | }
18 | 
19 | form input[type="text"],
20 | form textarea {
21 |   width: 100%;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/options/script.js:
--------------------------------------------------------------------------------
 1 | const apiTokenInput = document.querySelector("#apitoken");
 2 | 
 3 | function saveOptions(e) {
 4 |   e.preventDefault();
 5 |   browser.storage.sync.set({
 6 |     apitoken: apiTokenInput.value,
 7 |   });
 8 | }
 9 | 
10 | function restoreOptions() {
11 |   browser.storage.sync.get("apitoken").then((res) => {
12 |     apiTokenInput.value = res.apitoken || "";
13 |   });
14 | }
15 | 
16 | document.addEventListener("DOMContentLoaded", restoreOptions);
17 | document.querySelector("form").addEventListener("submit", saveOptions);
18 | 


--------------------------------------------------------------------------------
/src/content_script.js:
--------------------------------------------------------------------------------
 1 | browser.runtime.onMessage.addListener((request) => {
 2 |   if (request.action === "GET_DESCRIPTION") {
 3 |     let description = window.getSelection().toString();
 4 |     if (description.length < 1) {
 5 |       // if nothing is selected, try to get description from meta tag
 6 |       const metaDescription = document.querySelector(
 7 |         "meta[name='description']"
 8 |       );
 9 |       if (metaDescription) {
10 |         description = metaDescription.getAttribute("content");
11 |       }
12 |     }
13 |     return Promise.resolve(description);
14 |   }
15 | });
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 📌 Epic Pinboard
 2 | 
 3 | A Pinboard extension with a clean user interface.
 4 | 
 5 | ## Install dependencies
 6 | 
 7 |     npm install
 8 | 
 9 | ## Development
10 | 
11 |     npm run dev
12 | 
13 | This runs and watches the Webpack build and starts web-ext run to open a Firefox instance that has the extension installed. When you make changes, the extension will be updated automatically.
14 | 
15 | ## Building the extension
16 | 
17 |     npm run build-extension
18 | 
19 | This bumps the patch version, builds the Webpack bundles and then runs the web-ext build – resulting in a newly built extension zip ready for upload inside the web-ext-artifacts folder.
20 | 


--------------------------------------------------------------------------------
/src/pageAction/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link href="../styles/global.css" rel="stylesheet" />
 6 |     <link href="./pageAction-style.css" rel="stylesheet" />
 7 |     <link href="../page-action.css" rel="stylesheet" />
 8 |   </head>
 9 |   <body>
10 |     <div class="panel-section panel-section-header">
11 |       <div class="icon-section-header">
12 |         <img
13 |           style="width: 32px; height: 32px"
14 |           src="../icons/pinboard.svg"
15 |           alt="Pinboard icon"
16 |         />
17 |       </div>
18 |       <div class="text-section-header">Add to Pinboard</div>
19 |     </div>
20 |     <div id="pinboardAddBookmark"></div>
21 |     <script src="../page-action.bundle.js"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/src/options/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |   </head>
 6 | 
 7 |   <body>
 8 |     <div class="panel-section panel-section-header">
 9 |       <p>
10 |         Please provide your
11 |         <a href="https://pinboard.in/settings/password">Pinboard API token</a>
12 |         below:
13 |       </p>
14 |     </div>
15 |     <div class="panel-section panel-section-formElements">
16 |       <form>
17 |         <div class="form-item browser-style">
18 |           <label for="apitoken">API Token</label>
19 |           <input
20 |             type="password"
21 |             id="apitoken"
22 |             name="apitoken"
23 |             size="30"
24 |             placeholder="Pinboard API token"
25 |           />
26 |         </div>
27 |         <button class="browser-style" style="margin-top: 1rem" type="submit">
28 |           Save API Token
29 |         </button>
30 |       </form>
31 |     </div>
32 |     <script src="script.js"></script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/src/extension-page_script.js:
--------------------------------------------------------------------------------
 1 | const background = browser.extension.getBackgroundPage();
 2 | 
 3 | const status = document.getElementById("status");
 4 | const bookmarkContainer = document.getElementById("bookmarks");
 5 | 
 6 | const loadBookmarksButton = document.getElementById("loadBookmarks");
 7 | loadBookmarksButton.addEventListener("click", (e) => {
 8 |   background.loadBookmarks().then((posts) => {
 9 |     const markup = `
10 |     <ul class="bookmarks-list">
11 |     ${posts
12 |       .map(
13 |         (post) =>
14 |           `<li><a target="_blank" href="${post.href}">${post.description}</a></li>`
15 |       )
16 |       .join("")}
17 |     </ul>
18 |     `;
19 |     bookmarkContainer.innerHTML = markup;
20 |     posts.map((post) => {
21 |       return post;
22 |     });
23 |   });
24 | });
25 | 
26 | const loginButton = document.getElementById("login");
27 | loginButton.addEventListener("click", (e) => {
28 |   e.preventDefault();
29 |   background
30 |     .login()
31 |     .then((response) => {
32 |       status.innerHTML = "Successfully logged in";
33 |     })
34 |     .catch((err) => {
35 |       console.error(err);
36 |       status.innerHTML = "Error during login";
37 |     });
38 |   status.innerHTML = "Submitted";
39 | });
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "epic-pinboard",
 3 |   "version": "1.0.13",
 4 |   "description": "",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "build": "webpack",
 8 |     "watch": "webpack --watch",
 9 |     "prettier": "prettier --write ./src/**",
10 |     "web-ext:run": "web-ext run --source-dir=dist --verbose",
11 |     "web-ext:build": "web-ext build --source-dir=dist",
12 |     "dev": "npm-run-all --parallel watch web-ext:run",
13 |     "build-extension": "npm version patch && npm run build && npm run web-ext:build",
14 |     "test": "echo \"Error: no test specified\" && exit 1"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/mariofink/epic-pinboard.git"
19 |   },
20 |   "author": "Mario Fink",
21 |   "bugs": {
22 |     "url": "https://github.com/mariofink/epic-pinboard/issues"
23 |   },
24 |   "homepage": "https://github.com/mariofink/epic-pinboard#readme",
25 |   "devDependencies": {
26 |     "copy-webpack-plugin": "^9.0.1",
27 |     "css-loader": "^6.3.0",
28 |     "mini-css-extract-plugin": "^2.3.0",
29 |     "npm-run-all": "^4.1.5",
30 |     "prettier": "2.4.1",
31 |     "vue-loader": "^15.7.0",
32 |     "vue-template-compiler": "^2.6.8",
33 |     "web-ext": "^6.4.0",
34 |     "webpack": "^5.56.1",
35 |     "webpack-cli": "^4.8.0"
36 |   },
37 |   "dependencies": {
38 |     "@johmun/vue-tags-input": "^2.0.1",
39 |     "urlcat": "^2.0.2",
40 |     "vue": "^2.6.8",
41 |     "xml-js": "^1.6.11"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 |   "name": "Epic Pinboard",
 4 |   "description": "Browser extension for Pinboard.in",
 5 |   "version": "1.0.8",
 6 |   "applications": {
 7 |     "gecko": {
 8 |       "id": "epic-pinboard@mariofink.de",
 9 |       "strict_min_version": "59.0"
10 |     }
11 |   },
12 |   "icons": {
13 |     "48": "icons/icon.png",
14 |     "96": "icons/icon@2x.png"
15 |   },
16 |   "background": {
17 |     "scripts": ["background.bundle.js"]
18 |   },
19 |   "content_scripts": [
20 |     {
21 |       "matches": ["*://*/*"],
22 |       "js": ["content.bundle.js"]
23 |     }
24 |   ],
25 |   "page_action": {
26 |     "show_matches": ["*://*/*"],
27 |     "browser_style": true,
28 |     "default_icon": {
29 |       "19": "icons/pinboard_inactive.svg",
30 |       "38": "icons/pinboard_inactive.svg"
31 |     },
32 |     "default_popup": "pageAction/index.html",
33 |     "default_title": "Bookmark on Pinboard"
34 |   },
35 |   "options_ui": {
36 |     "page": "options/index.html"
37 |   },
38 |   "permissions": [
39 |     "*://api.pinboard.in/*",
40 |     "activeTab",
41 |     "tabs",
42 |     "menus",
43 |     "notifications",
44 |     "storage"
45 |   ],
46 |   "commands": {
47 |     "_execute_page_action": {
48 |       "suggested_key": {
49 |         "default": "Alt+P"
50 |       },
51 |       "description": "Add bookmark to Pinboard"
52 |     },
53 |     "submit_add_bookmark_form": {
54 |       "suggested_key": {
55 |         "default": "Alt+A"
56 |       }
57 |     }
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/services/pinboardService.js:
--------------------------------------------------------------------------------
 1 | import urlcat from "urlcat";
 2 | 
 3 | function doRequest(url) {
 4 |   return new Promise((resolve, reject) => {
 5 |     fetch(url)
 6 |       .then((response) => {
 7 |         resolve(response.json());
 8 |       })
 9 |       .catch((err) => {
10 |         reject(err);
11 |       });
12 |   });
13 | }
14 | 
15 | export default class PinboardService {
16 |   constructor(baseApiUrl) {
17 |     this.baseApiUrl = baseApiUrl;
18 |   }
19 |   login(token) {
20 |     const url = urlcat(this.baseApiUrl, "/user/api_token", {
21 |       auth_token: token,
22 |       format: "json",
23 |     });
24 |     return doRequest(url);
25 |   }
26 | 
27 |   getSuggestedTagsForUrl(token, bookmarkUrl) {
28 |     const url = urlcat(this.baseApiUrl, "/posts/suggest", {
29 |       auth_token: token,
30 |       url: bookmarkUrl,
31 |       format: "json",
32 |     });
33 |     return doRequest(url);
34 |   }
35 | 
36 |   getBookmarksForUrl(token, bookmarkUrl) {
37 |     const url = urlcat(this.baseApiUrl, "/posts/get", {
38 |       auth_token: token,
39 |       url: bookmarkUrl,
40 |       format: "json",
41 |     });
42 |     return doRequest(url);
43 |   }
44 | 
45 |   getAllTags(token) {
46 |     const url = urlcat(this.baseApiUrl, "/tags/get", {
47 |       auth_token: token,
48 |       format: "json",
49 |     });
50 |     return doRequest(url);
51 |   }
52 | 
53 |   addBookmark(token, bookmark) {
54 |     const url = urlcat(this.baseApiUrl, "/posts/add", {
55 |       auth_token: token,
56 |       url: bookmark.url,
57 |       description: bookmark.title,
58 |       extended: bookmark.notes,
59 |       tags: bookmark.tags,
60 |       shared: bookmark.shared,
61 |       toread: bookmark.toread,
62 |       format: "json",
63 |     });
64 |     return doRequest(url);
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
 3 |     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 4 | }
 5 | 
 6 | @-webkit-keyframes scale {
 7 |   0% {
 8 |     -webkit-transform: scale(1);
 9 |     transform: scale(1);
10 |     opacity: 1;
11 |   }
12 |   45% {
13 |     -webkit-transform: scale(0.1);
14 |     transform: scale(0.1);
15 |     opacity: 0.7;
16 |   }
17 |   80% {
18 |     -webkit-transform: scale(1);
19 |     transform: scale(1);
20 |     opacity: 1;
21 |   }
22 | }
23 | @keyframes scale {
24 |   0% {
25 |     -webkit-transform: scale(1);
26 |     transform: scale(1);
27 |     opacity: 1;
28 |   }
29 |   45% {
30 |     -webkit-transform: scale(0.1);
31 |     transform: scale(0.1);
32 |     opacity: 0.7;
33 |   }
34 |   80% {
35 |     -webkit-transform: scale(1);
36 |     transform: scale(1);
37 |     opacity: 1;
38 |   }
39 | }
40 | 
41 | /* from https://github.com/ConnorAtherton/loaders.css */
42 | .ball-pulse {
43 |   margin: 1rem auto;
44 |   text-align: center;
45 | }
46 | 
47 | .ball-pulse > div:nth-child(1) {
48 |   -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
49 |   animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
50 | }
51 | 
52 | .ball-pulse > div:nth-child(2) {
53 |   -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
54 |   animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
55 | }
56 | 
57 | .ball-pulse > div:nth-child(3) {
58 |   -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
59 |   animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
60 | }
61 | 
62 | .ball-pulse > div {
63 |   background-color: hsla(210.3, 100%, 63.5%, 0.5);
64 |   width: 15px;
65 |   height: 15px;
66 |   border-radius: 100%;
67 |   margin: 2px;
68 |   -webkit-animation-fill-mode: both;
69 |   animation-fill-mode: both;
70 |   display: inline-block;
71 | }
72 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const package = require("./package.json");
 2 | const path = require("path");
 3 | const CopyPlugin = require("copy-webpack-plugin");
 4 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 5 | const VueLoaderPlugin = require("vue-loader/lib/plugin");
 6 | 
 7 | module.exports = {
 8 |   mode: "development",
 9 |   devtool: "source-map",
10 |   entry: {
11 |     background: "./src/background_script.js",
12 |     "page-action": "./src/page-action_vue.js",
13 |     content: "./src/content_script.js",
14 |   },
15 |   output: {
16 |     filename: "[name].bundle.js",
17 |     path: path.resolve(__dirname, "dist"),
18 |   },
19 |   module: {
20 |     rules: [
21 |       {
22 |         test: /\.vue$/,
23 |         loader: "vue-loader",
24 |       },
25 |       {
26 |         test: /\.css$/,
27 |         use: [
28 |           {
29 |             loader: MiniCssExtractPlugin.loader,
30 |             options: {
31 |               // you can specify a publicPath here
32 |               // by default it use publicPath in webpackOptions.output
33 |               publicPath: "../",
34 |             },
35 |           },
36 |           "css-loader",
37 |         ],
38 |       },
39 |     ],
40 |   },
41 |   plugins: [
42 |     new VueLoaderPlugin(),
43 |     new MiniCssExtractPlugin({
44 |       // Options similar to the same options in webpackOptions.output
45 |       // both options are optional
46 |       filename: "[name].css",
47 |       chunkFilename: "[id].css",
48 |     }),
49 |     new CopyPlugin({
50 |       patterns: [
51 |         { from: "./src/pageAction", to: "pageAction" },
52 |         { from: "./src/icons", to: "icons" },
53 |         { from: "./src/components", to: "components" },
54 |         { from: "./src/options", to: "options" },
55 |         { from: "./src/styles", to: "styles" },
56 |         {
57 |           from: "./src/manifest.json",
58 |           to: "manifest.json",
59 |           transform(buffer) {
60 |             const manifest = JSON.parse(buffer.toString());
61 |             // sync the manifest version with the npm package.json version
62 |             manifest.version = package.version;
63 |             return JSON.stringify(manifest, null, 2);
64 |           },
65 |         },
66 |       ],
67 |     }),
68 |   ],
69 | };
70 | 


--------------------------------------------------------------------------------
/src/background_script.js:
--------------------------------------------------------------------------------
 1 | import PinboardService from "./services/pinboardService";
 2 | const baseApiUrl = "https://api.pinboard.in/v1";
 3 | const svc = new PinboardService(baseApiUrl);
 4 | 
 5 | function retrieveApiToken() {
 6 |   return new Promise((resolve, reject) => {
 7 |     browser.storage.sync.get("apitoken").then((res) => {
 8 |       resolve(res.apitoken || "");
 9 |     });
10 |   });
11 | }
12 | 
13 | async function login() {
14 |   const token = await retrieveApiToken();
15 |   return svc.login(token);
16 | }
17 | 
18 | async function loadBookmarks() {
19 |   const token = await retrieveApiToken();
20 |   return svc.loadRecent(token);
21 | }
22 | 
23 | async function addBookmark(bookmark) {
24 |   const token = await retrieveApiToken();
25 |   return svc.addBookmark(token, bookmark);
26 | }
27 | 
28 | async function getBookmarksForUrl(bookmarkUrl) {
29 |   const token = await retrieveApiToken();
30 |   return svc.getBookmarksForUrl(token, bookmarkUrl);
31 | }
32 | 
33 | async function getSuggestedTagsForUrl(bookmarkUrl) {
34 |   const token = await retrieveApiToken();
35 |   return svc.getSuggestedTagsForUrl(token, bookmarkUrl);
36 | }
37 | 
38 | async function getAllTags() {
39 |   const token = await retrieveApiToken();
40 |   const allTags = await svc.getAllTags(token);
41 |   const tagArray = Object.keys(allTags).map((k) => {
42 |     return { name: k, count: allTags[k] };
43 |   });
44 |   const tagsByCount = tagArray.sort((a, b) => {
45 |     return b.count - a.count;
46 |   });
47 |   return tagsByCount;
48 | }
49 | 
50 | function setActiveIcon(params) {
51 |   const path = params.active
52 |     ? "icons/pinboard.svg"
53 |     : "icons/pinboard_inactive.svg";
54 |   browser.pageAction.setIcon({
55 |     tabId: params.tabId,
56 |     path,
57 |   });
58 | }
59 | 
60 | browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
61 |   if (changeInfo.url) {
62 |     getBookmarksForUrl(tab.url)
63 |       .then((bookmarks) => {
64 |         if (bookmarks.posts.length > 0) {
65 |           setActiveIcon({ active: true, tabId: tab.id });
66 |         } else {
67 |           setActiveIcon({ active: false, tabId: tab.id });
68 |         }
69 |       })
70 |       .finally((e) => {
71 |         console.warn("Error while getting bookmarks", e);
72 |       });
73 |   }
74 | });
75 | 
76 | const actions = {
77 |   retrieveApiToken,
78 |   loadBookmarks,
79 |   login,
80 |   addBookmark,
81 |   getSuggestedTagsForUrl,
82 |   getAllTags,
83 |   getBookmarksForUrl,
84 |   setActiveIcon,
85 | };
86 | 
87 | browser.runtime.onMessage.addListener((message, sender, response) => {
88 |   const action = actions[message.action];
89 |   if (typeof action === "function") {
90 |     return action(message.payload);
91 |   } else {
92 |     console.warn(`action ${message.action} not supported`);
93 |     return;
94 |   }
95 | });
96 | 


--------------------------------------------------------------------------------
/src/components/AddBookmark/AddBookmark.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="token.length < 1">
  4 |       <div class="panel-section panel-section-header">
  5 |         <p>Please provide your Pinboard API token in the options.</p>
  6 |       </div>
  7 |       <div class="panel-section panel-section-footer">
  8 |         <div class="panel-section-footer-button default" @click="openOptions()">
  9 |           Open Epic Pinboard options
 10 |         </div>
 11 |       </div>
 12 |     </div>
 13 |     <div v-else>
 14 |       <div v-show="loading">
 15 |         <div class="ball-pulse">
 16 |           <div></div>
 17 |           <div></div>
 18 |           <div></div>
 19 |         </div>
 20 |       </div>
 21 |       <div class="panel-section panel-section-formElements" v-show="!loading">
 22 |         <form id="addBoomarkForm">
 23 |           <div class="form-item browser-style">
 24 |             <label for="url">URL</label>
 25 |             <input
 26 |               type="text"
 27 |               name="url"
 28 |               id="url"
 29 |               maxlength="2000"
 30 |               v-model="url"
 31 |             />
 32 |           </div>
 33 |           <div class="form-item browser-style">
 34 |             <label for="title">Title</label>
 35 |             <input
 36 |               type="text"
 37 |               name="title"
 38 |               id="title"
 39 |               maxlength="255"
 40 |               v-model="title"
 41 |             />
 42 |           </div>
 43 |           <div class="form-item browser-style">
 44 |             <label for="tags">Tags</label>
 45 |             <vue-tags-input
 46 |               ref="tagsInput"
 47 |               v-model="tag"
 48 |               :tags="tags"
 49 |               :autocomplete-items="filteredTags"
 50 |               @tags-changed="(newTags) => (tags = newTags)"
 51 |             />
 52 |           </div>
 53 |           <div class="form-item browser-style">
 54 |             <label for="suggested">Suggested Tags</label>
 55 |             <ul class="suggested-tags">
 56 |               <li
 57 |                 class="suggested-tag"
 58 |                 v-for="tag in suggestedTags"
 59 |                 :key="tag"
 60 |                 @click="addSuggestedTag(tag)"
 61 |               >
 62 |                 {{ tag }}
 63 |               </li>
 64 |             </ul>
 65 |           </div>
 66 |           <div class="form-item browser-style">
 67 |             <label for="notes">Notes</label>
 68 |             <textarea
 69 |               class="browser-style"
 70 |               name="notes"
 71 |               id="notes"
 72 |               maxlength="65536"
 73 |               v-model="notes"
 74 |             ></textarea>
 75 |           </div>
 76 |           <div class="form-item browser-style">
 77 |             <input
 78 |               type="checkbox"
 79 |               id="private"
 80 |               name="private"
 81 |               v-model="privateBookmark"
 82 |             />
 83 |             <label for="private" class="inline">Private bookmark</label>
 84 |           </div>
 85 |           <div class="form-item browser-style">
 86 |             <input
 87 |               type="checkbox"
 88 |               id="readlater"
 89 |               name="readlater"
 90 |               v-model="readLater"
 91 |             />
 92 |             <label for="readlater" class="inline">Read later</label>
 93 |           </div>
 94 |         </form>
 95 |       </div>
 96 |       <div class="panel-section panel-section-footer" v-show="!loading">
 97 |         <div
 98 |           class="panel-section-footer-button default"
 99 |           id="addBookmarkButton"
100 |           @click="addBookmark"
101 |         >
102 |           {{ buttonCaption }}
103 |         </div>
104 |       </div>
105 |     </div>
106 |   </div>
107 | </template>
108 | 
109 | <script>
110 | import { VueTagsInput, createTags } from "@johmun/vue-tags-input";
111 | 
112 | function getActiveTab() {
113 |   return new Promise((resolve, reject) => {
114 |     browser.tabs.query({ active: true, currentWindow: true }, (tabs) => {
115 |       resolve(tabs[0]);
116 |     });
117 |   });
118 | }
119 | 
120 | const ctaAddBookmark = "Add bookmark";
121 | const ctaUpdateBookmark = "Update bookmark";
122 | 
123 | export default {
124 |   components: {
125 |     VueTagsInput,
126 |   },
127 |   data() {
128 |     return {
129 |       token: "",
130 |       allTags: [],
131 |       url: "",
132 |       title: "",
133 |       suggestedTags: [],
134 |       notes: "",
135 |       privateBookmark: false,
136 |       tags: [],
137 |       tag: "",
138 |       readLater: false,
139 |       loading: true,
140 |       buttonCaption: ctaAddBookmark,
141 |     };
142 |   },
143 |   async mounted() {
144 |     this.token = await browser.runtime.sendMessage({
145 |       action: "retrieveApiToken",
146 |     });
147 |     const allTagsObject = await browser.runtime.sendMessage({
148 |       action: "getAllTags",
149 |     });
150 |     this.allTags = allTagsObject.map((i) => i.name);
151 |     getActiveTab().then((tab) => {
152 |       this.url = tab.url;
153 |       this.title = tab.title;
154 |       browser.runtime
155 |         .sendMessage({ action: "getBookmarksForUrl", payload: tab.url })
156 |         .then((bookmarks) => {
157 |           if (bookmarks.posts.length > 0) {
158 |             this.buttonCaption = ctaUpdateBookmark;
159 |             const existingBookmark = bookmarks.posts[0];
160 |             this.title = existingBookmark.description;
161 |             this.notes = existingBookmark.extended;
162 |             this.privateBookmark = existingBookmark.shared === "no";
163 |             this.readLater = existingBookmark.toread === "yes";
164 |             if (existingBookmark.tags.length > 0) {
165 |               const existingTags = existingBookmark.tags.split(" ");
166 |               this.tags = existingTags;
167 |               if (existingTags.length > 0) {
168 |                 this.tags = createTags(existingTags);
169 |               }
170 |             }
171 |           } else {
172 |             browser.tabs
173 |               .sendMessage(tab.id, {
174 |                 action: "GET_DESCRIPTION",
175 |               })
176 |               .then(
177 |                 (description) => {
178 |                   this.notes = description;
179 |                 },
180 |                 (err) => {
181 |                   console.error("err", err);
182 |                 }
183 |               );
184 |           }
185 |         });
186 |       browser.runtime
187 |         .sendMessage({
188 |           action: "getSuggestedTagsForUrl",
189 |           payload: tab.url,
190 |         })
191 |         .then((suggestions) => {
192 |           this.suggestedTags = suggestions[1].recommended;
193 |           this.loading = false;
194 |           // see: https://github.com/JohMun/vue-tags-input/issues/65
195 |           this.$nextTick(() => {
196 |             this.$refs.tagsInput.$refs.newTagInput.focus();
197 |           });
198 |         })
199 |         .catch((err) => {
200 |           this.loading = false;
201 |         });
202 |     });
203 |     browser.commands.onCommand.addListener((command) => {
204 |       if (command === "submit_add_bookmark_form") {
205 |         this.addBookmark();
206 |       }
207 |     });
208 |   },
209 |   methods: {
210 |     openOptions() {
211 |       browser.runtime.openOptionsPage();
212 |       window.close();
213 |     },
214 |     addSuggestedTag(tag) {
215 |       this.tags.push({ text: tag });
216 |     },
217 |     async addBookmark() {
218 |       const bookmark = {
219 |         url: this.url,
220 |         title: this.title,
221 |         tags: this.tags.map((tag) => tag.text).join(" "),
222 |         notes: this.notes,
223 |         shared: this.privateBookmark ? "no" : "yes",
224 |         toread: this.readLater ? "yes" : "no",
225 |       };
226 |       browser.runtime
227 |         .sendMessage({
228 |           action: "addBookmark",
229 |           payload: bookmark,
230 |         })
231 |         .catch((error) => {
232 |           console.error("Error during addBookmark", error);
233 |         })
234 |         .finally(() => {
235 |           /* 
236 |           Since Firefox 79 there are some strange errors that can 
237 |           occur during the above sendMessage call.
238 |           As a quick fix, let's assume that the above call is always successful
239 |           */
240 |           getActiveTab().then((tab) => {
241 |             browser.runtime.sendMessage({
242 |               action: "setActiveIcon",
243 |               payload: { active: true, tabId: tab.id },
244 |             });
245 |           });
246 |           window.close();
247 |         });
248 |     },
249 |   },
250 |   computed: {
251 |     filteredTags: function () {
252 |       const filtered = this.allTags
253 |         .filter((tag) => {
254 |           return tag.toLowerCase().startsWith(this.tag.toLowerCase());
255 |         })
256 |         .map((tag) => {
257 |           return {
258 |             text: tag,
259 |           };
260 |         });
261 |       return filtered.slice(0, 5);
262 |     },
263 |   },
264 | };
265 | </script>
266 | 
267 | <style>
268 | .suggested-tags {
269 |   list-style: none;
270 |   padding: 0;
271 | }
272 | 
273 | .suggested-tag {
274 |   background: hsl(210.3, 100%, 63.5%);
275 |   color: white;
276 |   border-radius: 4px;
277 |   padding: 0.25rem 0.75rem;
278 |   margin-top: 0.25rem;
279 |   margin-right: 0.5rem;
280 |   display: inline-flex;
281 |   align-items: center;
282 |   justify-content: center;
283 |   line-height: 1.5;
284 | }
285 | 
286 | .suggested-tag.active,
287 | .suggested-tag:hover {
288 |   cursor: pointer;
289 |   background: #0060df;
290 | }
291 | 
292 | .vue-tags-input .ti-item.ti-selected-item,
293 | .vue-tags-input .ti-tag {
294 |   background: hsl(210.3, 100%, 63.5%) !important;
295 | }
296 | </style>
297 | 


--------------------------------------------------------------------------------