🔮 Chrome の Manifest V3 に対応させる

build.ts

@@ -49,23 +49,41 @@ const makeManifestFile = async (targetBrowser: Browser) => {
       distPath('manifest.json', targetBrowser),
       JSON.stringify(manifestJson, null, 1)
     );
+  } else if (targetBrowser === 'chrome') {
+    const chromeJson = JSON.parse(await fs.readFile('chrome.json', 'utf8'));
+    const manifestJson = { ...baseManifestJson, ...chromeJson };
+    fs.writeFile(
+      distPath('manifest.json', targetBrowser),
+      JSON.stringify(manifestJson, null, 1)
+    );
   } else {
     fs.copyFile('manifest.json', distPath('manifest.json', targetBrowser));
   }
 };
 
 const buildExtension = async (targetBrowser: Browser) => {
-  await fs.mkdir(distPath('background', targetBrowser), { recursive: true });
   await fs.mkdir(distPath('option', targetBrowser), { recursive: true });
   await fs.mkdir(distPath('icons', targetBrowser), { recursive: true });
 
-  build({
-    entryPoints: ['src/background/index.ts'],
-    bundle: true,
-    outdir: distPath('background', targetBrowser),
-    watch: watchOption(targetBrowser),
-    sourcemap: devFlag ? 'inline' : false,
-  });
+  if (targetBrowser === 'firefox') {
+    await fs.mkdir(distPath('background', targetBrowser), { recursive: true });
+    build({
+      entryPoints: ['src/background/index.ts'],
+      bundle: true,
+      outdir: distPath('background', targetBrowser),
+      watch: watchOption(targetBrowser),
+      sourcemap: devFlag ? 'inline' : false,
+    });
+  } else if (targetBrowser === 'chrome') {
+    await fs.mkdir(distPath('service_worker', targetBrowser), { recursive: true });
+    build({
+      entryPoints: ['src/service_worker/index.ts'],
+      bundle: true,
+      outdir: distPath('service_worker', targetBrowser),
+      watch: watchOption(targetBrowser),
+      sourcemap: devFlag ? 'inline' : false,
+    });
+  }
 
   // build tsx by esbuild
   build({

chrome.json

@@ -0,0 +1,6 @@
+{
+  "manifest_version": 3,
+  "background": {
+    "service_worker": "service_worker/index.js"
+  }
+}

firefox.json

@@ -1,7 +1,12 @@
 {
   "browser_specific_settings": {
     "gecko": {
-      "id": "mikan@example.com"
+      "id": "kankan-mikan@napple.team"
     }
+  },
+  "background": {
+    "scripts": [
+      "background/index.js"
+    ]
   }
 }

manifest.json

@@ -14,10 +14,5 @@
   ],
   "options_ui": {
     "page": "option/index.html"
-  },
-  "background": {
-    "scripts": [
-      "background/index.js"
-    ]
   }
 }

src/background/index.ts

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill';
-import { Post } from './post';
+import { Post } from '../lib/post';
 
 const post: Post = new Post();
 
@@ -11,6 +11,7 @@ const notification = async (message: string) => {
   await browser.notifications.create(`kankan-mikan-${new Date().getTime()}`, {
     type: 'basic',
     title: 'kankan-mikan',
+    iconUrl: 'icons/icon.png',
     message
   });
 };

src/background/post.ts → src/lib/post.ts

@@ -33,7 +33,7 @@ export class Post {
   }
 
   async save() {
-    browser.storage.local.set({
+    return browser.storage.local.set({
       template: this.template,
       postUrl: this.postUrl,
       contentType: this.contentType,
@@ -59,7 +59,6 @@ export class Post {
   }
 
   async submit(url: string) {
-    if (!this.postUrl) return;
     await axios.post(
       this.postUrl,
       this.generate(url),

src/service_worker/index.ts

@@ -0,0 +1,71 @@
+import browser from 'webextension-polyfill';
+import { Post as PostBase } from '../lib/post';
+
+class Post extends PostBase {
+  constructor() {
+    super();
+  }
+
+  async submit(url: string) {
+    await fetch(
+      this.postUrl,
+      {
+        method: 'POST',
+        body: this.generate(url),
+        headers: { 'Content-Type': this.contentType }
+      }
+    );
+  }
+}
+
+const post: Post = new Post();
+
+(async () => {
+  await post.sync();
+})();
+
+const notification = async (message: string) => {
+  await browser.notifications.create(`kankan-mikan-${new Date().getTime()}`, {
+    type: 'basic',
+    title: 'kankan-mikan',
+    iconUrl: 'icons/icon.png',
+    message
+  });
+};
+
+browser.contextMenus.create({
+  id: 'kankan-mikan',
+  type: 'normal',
+  title: 'Post url with kankan-mikan',
+  contexts: ['link'],
+});
+
+browser.contextMenus.onClicked.addListener(async (info) => {
+  if (!post.isStandby) await notification('Please setup')
+  try {
+    if (info.linkUrl && (post.isFilteredUrl() || post.validate(info.linkUrl))) {
+      await post.submit(info.linkUrl);
+      await notification('Posted!');
+    } else {
+      await notification('Invalid url');
+    }
+  } catch (err: any) {
+    await notification(`${err}`);
+  }
+});
+
+browser.runtime.onMessage.addListener(async (message, sender) => {
+  if (sender.id === browser.runtime.id) {
+    switch (message.cmd) {
+      case 'configures/save':
+        post.postUrl = message.postUrl;
+        post.template = message.template;
+        post.contentType = message.contentType;
+        post.regexp = message.regexp;
+        await post.save();
+        break;
+      case 'configures/get':
+        return Promise.resolve(post.get());
+    }
+  }
+});