support multi browser

README.md

@@ -1,10 +1,10 @@
 # comment viewer extension
 
-[CommentScreen](https://commentscreen.com/) のコメントを任意のページで確認・投稿できるようになるChrome拡張機能
+[CommentScreen](https://commentscreen.com/) のコメントを任意のページで確認・投稿できるようになるブラウザ拡張機能
 
 ## Install
 
-[リリースページ](https://github.com/mokemoko/comment-viewer-extension/releases) から最新バージョンのZipをダウンロードし、拡張機能ページにDrag&Dropでインストールしてください
+[リリースページ](https://github.com/mokemoko/comment-viewer-extension/releases) から利用しているブラウザに対応した最新バージョンのアーカイブをダウンロードし、拡張機能ページにDrag&Dropでインストールしてください
 
 ## Features
 

app/manifest.json

@@ -2,7 +2,7 @@
   "name": "__MSG_appName__",
   "short_name": "__MSG_appShortName__",
   "description": "__MSG_appDescription__",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "manifest_version": 2,
   "default_locale": "en",
   "icons": {

app/scripts/browser_action.js

@@ -1,27 +1,25 @@
 import { GET_PAGE_INFO } from "./util/constant";
 import { IS_VISIBLE, IS_DARK_MODE, IS_NICO_MODE } from "./util/constant";
 
-function onChange(event) {
+async function onChange(event) {
   const el = event.target;
-  chrome.tabs.query({ currentWindow: true, active: true }, tabs => {
-    chrome.tabs.sendMessage(tabs[0].id, { type: el.id, value: el.checked });
-  });
+  const tabs = await browser.tabs.query({ currentWindow: true, active: true });
+  await browser.tabs.sendMessage(tabs[0].id, { type: el.id, value: el.checked });
 }
 
-function bindValue() {
-  chrome.tabs.query({ currentWindow: true, active: true }, tabs => {
-    chrome.tabs.sendMessage(tabs[0].id, { type: GET_PAGE_INFO }, info => {
-      [IS_VISIBLE, IS_DARK_MODE, IS_NICO_MODE].forEach(key => {
-        const el = document.querySelector(`#${key}`)
-        el.checked = info[key];
-        el.addEventListener("change", onChange);
-      });
-    });
+async function bindValue() {
+  const tabs = await browser.tabs.query({ currentWindow: true, active: true });
+  const info = await browser.tabs.sendMessage(tabs[0].id, { type: GET_PAGE_INFO });
+
+  [IS_VISIBLE, IS_DARK_MODE, IS_NICO_MODE].forEach(key => {
+    const el = document.querySelector(`#${key}`)
+    el.checked = info[key];
+    el.addEventListener("change", onChange);
   });
 }
 
-function onLoad() {
-  bindValue();
+async function onLoad() {
+  await bindValue();
 }
 
 onLoad();

app/scripts/contentscript.js

@@ -10,7 +10,8 @@ class Extension {
     this.isDarkMode = false;
     this.isNicoMode = false;
 
-    chrome.runtime.onMessage.addListener((req, sender, callback) => {
+    browser.runtime.onMessage.addListener((req, sender, callback) => {
+      let res = {};
       switch (req.type) {
         case IS_VISIBLE:
           this.switchVisible(req.value);
@@ -22,9 +23,10 @@ class Extension {
           this.switchNicoMode(req.value);
           break;
         case GET_PAGE_INFO:
-          callback(this.info());
+          res = this.info();
           break;
       }
+      return Promise.resolve(res);
     });
 
     window.addEventListener("message", e => {
@@ -61,7 +63,7 @@ class Extension {
   install () {
     this.el = document.createElement("iframe");
     this.el.id = "comment-viewer-ex";
-    this.el.src = chrome.runtime.getURL("pages/inner_content.html");
+    this.el.src = browser.runtime.getURL("pages/inner_content.html");
     document.body.appendChild(this.el);
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comment-viewer-extension",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "comment viewer for multi chat tools.",
   "scripts": {
     "dev": "webextension-toolbox dev chrome",