Migrating to Manifest V3

browser/manifest.json

@@ -1,57 +1,52 @@
 {
   "background": {
-    "page": "background.html"
+    "service_worker": "./build/serviceworker.js",
+    "type": "module"
+  },
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'; connect-src * data: blob:;"
   },
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; connect-src * data: blob:;",
   "options_ui": {
     "page": "options.html"
   },
   "description": "Unofficial browser extension for Scrapbox",
   "icons": {
     "128": "icon.png",
-    "48" : "icon.png",
-    "16" : "icon.png"
+    "48": "icon.png",
+    "16": "icon.png"
   },
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "ScrapScripts",
 
   "content_scripts": [
     {
-        "matches": ["<all_urls>"],
-        "js": [
-            "build/bundle.js"
-        ],
-        "run_at": "document_start"
+      "matches": ["<all_urls>"],
+      "js": ["build/bundle.js"],
+      "run_at": "document_start"
     },
     {
       "matches": ["*://scrapbox.io/*", "http://localhost/*"],
-      "css": [
-        "content_scripts_css/scrapbox-io/main.css"
-      ],
-      "js": [
-          "build/scrapbox-io.js"
-      ],
+      "css": ["content_scripts_css/scrapbox-io/main.css"],
+      "js": ["build/scrapbox-io.js"],
       "run_at": "document_end"
     },
     {
       "matches": ["*://gyazo.com/*"],
-      "css": [
-        "content_scripts_css/scrapbox-io/main.css"
-      ],
-      "js": [
-        "build/gyazo-com.js"
-      ],
+      "css": ["content_scripts_css/scrapbox-io/main.css"],
+      "js": ["build/gyazo-com.js"],
       "run_at": "document_end"
     }
   ],
 
   "permissions": [
-      "contextMenus",
-      "tabs",
-      "activeTab",
-      "clipboardRead",
-      "<all_urls>"
+    "contextMenus",
+    "tabs",
+    "activeTab",
+    "clipboardRead",
+    "storage"
   ],
 
+  "host_permissions": ["*://*/*"],
+
   "version": "1.2.2"
 }

client/serviceworker.js

@@ -0,0 +1,167 @@
+// background
+
+const isChrome = () => {
+  return /Chrome/.test(navigator.userAgent);
+};
+
+const app = isChrome() ? chrome : browser;
+
+const getStorageValues = (keys = []) => {
+  return new Promise((resolve, reject) => {
+    const values = Object.create(null);
+    app.storage.local.get(keys, (res) => {
+      for (const key of Object.keys(res)) {
+        values[key] = res[key];
+      }
+      resolve(values);
+    });
+  });
+};
+
+app.runtime.onMessage.addListener(async function (
+  request,
+  sender,
+  sendResponse
+) {
+  const cmd = request.command;
+
+  // 外部サイトで発動する機能を有効にする
+  if (cmd === "enable-daiiz-script") {
+    const funcProjectPairs = request.func_project_pairs;
+    const funcNames = Object.keys(funcProjectPairs);
+    console.log("[enable-daiiz-script]", funcNames);
+    for (let i = 0; i < funcNames.length; i++) {
+      const funcName = funcNames[i];
+      const projectName = funcProjectPairs[funcName];
+
+      if (!funcName || funcName.length === 0) {
+        return;
+      }
+      if (!projectName || projectName.length === 0) {
+        app.storage.local.remove([funcName], () => {
+          console.log("removed:", funcName);
+        });
+      } else if (projectName.length > 0) {
+        app.storage.local.set({ [funcName]: projectName }, () => {
+          console.log("set:", funcName);
+        });
+      }
+    }
+    return;
+  }
+
+  // 設定された値を返す
+  if (cmd === "get-project-name") {
+    console.log("[get-project-name]");
+    const tabs = await app.tabs.query({ currentWindow: true, active: true });
+    const funcNames = request.func_names;
+    // const projectNames = Object.create(null);
+    // for (let i = 0; i < funcNames.length; i++) {
+    //   const funcName = funcNames[i];
+    //   if (localStorage[funcName]) {
+    //     projectNames[funcName] = localStorage[funcName];
+    //   }
+    // }
+    // const projectNames = new Promise((resolve, reject) => {
+    //   const pNames = Object.create(null);
+    //   app.storage.local.get(funcNames, (res) => {
+    //     for (const funcName of Object.keys(res)) {
+    //       pNames[funcName] = res[funcName];
+    //     }
+    //     resolve(pNames);
+    //   });
+    // });
+    const projectNames = await getStorageValues(funcNames);
+    console.log("...1.", projectNames);
+    app.tabs.sendMessage(tabs[0].id, {
+      command: "re:get-project-name",
+      projectNames,
+    });
+    return;
+  }
+
+  // 廃止
+  // Clipboardに保持されたURLのページタイトルを返却する
+  // if (cmd === "get-clipboard-page") {
+  //   console.log("[get-clipboard-page]");
+  //   // const bg = window.app.extension.getBackgroundPage();
+  //   // const textarea = document.querySelector("#daiiz-ctrlv");
+  //   // textarea.value = "";
+  //   // textarea.focus();
+  //   // bg.document.execCommand("paste");
+  //   // resopondWebpageTitleOrRawText(textarea.value, sendResponse);
+  // }
+
+  // URLのページタイトルを返却する
+  if (cmd === "fetch-page-title") {
+    const text = request.rawText;
+    console.log("#", "fetch-page-title", text);
+    await resopondWebpageTitleOrRawText(text, sendResponse);
+  }
+});
+
+const resopondWebpageTitleOrRawText = async (text, sendResponse) => {
+  if (text.match(/\n/)) {
+    return sendResponse(text);
+  }
+  if (text.match(/^https?:\/\/scrapbox\.io\//)) {
+    return sendResponse(text);
+  }
+  if (text.match(/gyazo\.com\//)) {
+    return sendResponse(text);
+  }
+  if (text.match(/www\.youtube\.com\//)) {
+    return sendResponse(text);
+  }
+  if (text.match(/www\.google/) && text.match(/\/maps\//)) {
+    return sendResponse(text);
+  }
+  if (text.match(/^https?:\/\//)) {
+    const tabs = await app.tabs.query({ currentWindow: true, active: true });
+    try {
+      await fetchPage(text, tabs);
+    } catch (err) {
+      console.error(err);
+      // textarea#text-inputをブロックしており、解除する必要があるので必ず応答を返す
+      app.tabs.sendMessage(tabs[0].id, {
+        command: "re:get-clipboard-page",
+        externalLink: text,
+      });
+    }
+    return;
+  }
+  return sendResponse(text);
+};
+
+const fetchPage = async (url, tabs) => {
+  const res = await fetch(url, { credentials: "include" });
+  if (!res.ok) {
+    throw new Error("Failed to fetch page.");
+  }
+  const body = await res.text();
+
+  // DOMParserを使えないので文字列操作でtitleを取り出す
+  let externalLink = url;
+  let title = "";
+
+  let substr = body.split("</title>")[0];
+  if (substr) {
+    substr = substr.split("<title>")[1];
+  }
+  if (substr) {
+    title = substr
+      .trim()
+      .split("\n")
+      .filter((x) => !!x.trim())
+      .join("");
+    console.log("[fetchPage]", title);
+  }
+  if (title) {
+    externalLink = `[${url} ${title}]`;
+  }
+
+  app.tabs.sendMessage(tabs[0].id, {
+    command: "re:get-clipboard-page",
+    externalLink,
+  });
+};