support manifest v2

larvata · Jun 17, 2022 · 644f77d · 644f77d
1 parent a74944d
commit 644f77d
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 99 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -16,5 +16,6 @@ module.exports = {
   },
   globals: {
     chrome: true,
+    browser: true,
   },
 };
diff --git a/Readme.md b/Readme.md
@@ -12,8 +12,12 @@ TODO
 ```
 npm install
 npm run watch
+
+// build manifest v2 version
+MANIFEST_VERSION=2 npm run watch
 ```
 
+
 ## Publish
 
 ```

diff --git a/pack → pack.sh b/pack → pack.sh
@@ -7,35 +7,37 @@ FIREFOX_PKG=ctx_wave_${VER}_firefox_unsigned.zip
 EDGE_PKG=ctx_wave_${VER}_edge_unsigned.zip
 ZIP_FILE_PATH=../${CHROME_PKG}
 
-FF_EXTENSION_ID="<TODO>"
-FF_ADDITIONAL_PROPERTY=". + { \"browser_specific_settings\": { \"gecko\": { \"id\": \"{${FF_EXTENSION_ID}}\", \"strict_min_version\": \"70.0\" } } }"
-
 RELEASE_PATH="publish"
-
 mkdir $RELEASE_PATH 2>/dev/null
 
+
 if [[ -f $RELEASE_PATH/$CHROME_PKG ]]; then
   rm $RELEASE_PATH/$CHROME_PKG
 fi
 if [[ -f $RELEASE_PATH/$FIREFOX_PKG ]]; then
   rm $RELEASE_PATH/$FIREFOX_PKG
 fi
 
-npm run build
 
+# chrome manifest v3
+npm run build
 (cd dist && \
   zip -r ../$RELEASE_PATH/$CHROME_PKG * \
     -x "*.DS_Store" \
     -x "__MACOSX" \
     -x "*.map" \
-    -x "_firefox")
+    -x "manifests/*")
 
-# create manifest for firefox
-jq "${FF_ADDITIONAL_PROPERTY}" dist/manifest.json > $RELEASE_PATH/manifest.json
 
-cp $RELEASE_PATH/$CHROME_PKG $RELEASE_PATH/$FIREFOX_PKG
-cp $RELEASE_PATH/$CHROME_PKG $RELEASE_PATH/$EDGE_PKG
-(cd $RELEASE_PATH && zip $FIREFOX_PKG manifest.json)
-
-# cleanup
-rm $RELEASE_PATH/manifest.json
+# firefox manifest v2
+MANIFEST_VERSION=2 npm run build
+FF_EXTENSION_ID="0ac9ec36-bf7e-41b0-85d2-2a5b50e91f1b"
+FF_ADDITIONAL_PROPERTY=". + { \"browser_specific_settings\": { \"gecko\": { \"id\": \"{${FF_EXTENSION_ID}}\", \"strict_min_version\": \"70.0\" } } }"
+jq "${FF_ADDITIONAL_PROPERTY}" dist/manifest.json > dist/tmp_manifest.json && \
+  mv dist/tmp_manifest.json dist/manifest.json
+(cd dist && \
+  zip -r ../$RELEASE_PATH/$FIREFOX_PKG * \
+    -x "*.DS_Store" \
+    -x "__MACOSX" \
+    -x "*.map" \
+    -x "manifests/*")
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ctx-wave",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "Web Browser Extesion for langchao.org",
   "scripts": {
     "build": "webpack --mode=production --node-env=production",

diff --git a/src/background.js b/src/background.js
@@ -1,8 +1,10 @@
 import { WAVE_EVENTS, API_URL } from './common/constants';
-import { fetchJSON } from './common/utils';
+import { setGlobalVariables, fetchJSON } from './common/utils';
+
+setGlobalVariables();
 
 function messageAddListener(eventName, callback) {
-  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     const { event } = request;
     if (event !== eventName) {
       return false;
@@ -12,7 +14,7 @@ function messageAddListener(eventName, callback) {
 }
 
 const saveAndSendResponse = (key, data, sendResponse) => {
-  chrome.storage.local.set({
+  browser.storage.local.set({
     [key]: data,
   }, () => {
     sendResponse(data);
@@ -47,7 +49,7 @@ messageAddListener(WAVE_EVENTS.REFRESH, (request, sender, sendResponse) => {
 });
 
 messageAddListener(WAVE_EVENTS.GET_PROFILE, (request, sender, sendResponse) => {
-  chrome.storage.local.get('profile', (response) => {
+  browser.storage.local.get('profile', (response) => {
     sendResponse(response.profile);
   });
   return true;

diff --git a/src/common/utils.js b/src/common/utils.js
@@ -1,3 +1,7 @@
+function setGlobalVariables() {
+  globalThis.browser = globalThis.chrome || globalThis.browser;
+}
+
 async function fetchJSON(url, options) {
   const result = {
     success: false,
@@ -24,6 +28,17 @@ async function fetchJSON(url, options) {
   }
 }
 
+function promisify(func) {
+  return (...options) => new Promise((resolve, reject) => {
+    // TODO handle reject()
+    func.call(func, ...options, (results) => {
+      resolve(results);
+    });
+  });
+}
+
 export {
+  promisify,
   fetchJSON,
+  setGlobalVariables,
 };
diff --git a/src/components/Link.jsx b/src/components/Link.jsx
@@ -2,7 +2,7 @@ function onLinkClick(href) {
   if (!href) {
     return;
   }
-  chrome.tabs.create({ url: href });
+  browser.tabs.create({ url: href });
 }
 
 function Link(props) {

diff --git a/src/components/Popup/Footer.jsx b/src/components/Popup/Footer.jsx
@@ -9,11 +9,11 @@ function Footer() {
       <div className="content">
         <div>
           <Link href={PAGE_URL.ABOUT}>
-            {chrome.i18n.getMessage('Footer_About')}
+            {browser.i18n.getMessage('Footer_About')}
           </Link>
           <span>·</span>
           <Link href={PAGE_URL.FEEDBACK}>
-            {chrome.i18n.getMessage('Footer_Feedback')}
+            {browser.i18n.getMessage('Footer_Feedback')}
           </Link>
         </div>
         <span>{`Langchao.org ${new Date().getFullYear()}`}</span>

diff --git a/src/components/Popup/Header.jsx b/src/components/Popup/Header.jsx
@@ -5,7 +5,7 @@ function Header() {
     <div className="header">
       <Logo />
       <span className="title">
-        {chrome.i18n.getMessage('extension_name')}
+        {browser.i18n.getMessage('extension_name')}
       </span>
       <style jsx="true">
         {`

diff --git a/src/components/Popup/LoginContent.jsx b/src/components/Popup/LoginContent.jsx
@@ -7,12 +7,12 @@ function LoginContent() {
     <div className="login">
       <Link className="button primary" href={PAGE_URL.LOGIN}>
         <Button type="primary">
-          {chrome.i18n.getMessage('UI_Login_Button')}
+          {browser.i18n.getMessage('UI_Login_Button')}
         </Button>
       </Link>
       <style jsx="true">
         {`
-          html {
+          body {
             height: 245px;
           }
           .login {

diff --git a/src/components/Popup/MainContent.jsx b/src/components/Popup/MainContent.jsx
@@ -9,7 +9,7 @@ import {
   message,
 } from 'antd';
 
-import { fetchJSON } from '../../common/utils';
+import { promisify, fetchJSON } from '../../common/utils';
 import { API_URL } from '../../common/constants';
 import DatePicker from '../DatePicker';
 
@@ -40,39 +40,42 @@ function MainContent(props) {
   const mainContentRef = useRef(null);
 
   const extractHtml = async () => {
-    const url = window.location.href;
-    const tab = await new Promise((resolve) => {
-      chrome.tabs.query({
-        active: true,
-        currentWindow: true,
-      }, (tabs) => resolve(tabs[0]));
+    const manifestVersion = browser.runtime.getManifest().manifest_version;
+    const [tab] = await promisify(browser.tabs.query)({
+      active: true,
+      currentWindow: true,
     });
-    if (url.startsWith('safari-web-extension://')) {
-      // eslint-disable-next-line no-undef
-      const [html] = await browser.tabs.executeScript(tab.id, { code: 'document.documentElement.innerHTML' });
-      return [tab.url, html];
+
+    const result = {
+      url: tab.url,
+    };
+
+    if (manifestVersion === 2) {
+      const [html] = await promisify(browser.tabs.executeScript)(tab.id, {
+        code: 'document.documentElement.innerHTML',
+      });
+      result.html = html;
+    } else if (manifestVersion === 3) {
+      const [data] = await promisify(browser.scripting.executeScript)({
+        target: { tabId: tab.id },
+        func: () => document.documentElement.innerHTML,
+      });
+      result.html = data.result;
     }
-    const htmlResult = await new Promise((resolve) => {
-      chrome.scripting.executeScript(
-        {
-          target: { tabId: tab.id },
-          func: () => ({
-            html: document.documentElement.innerHTML,
-          }),
-        },
-        resolve,
-      );
-    });
-    return [tab.url, htmlResult.result.html];
+
+    return result;
   };
 
   const updateNewsContent = async () => {
-    const [url, html] = await extractHtml();
+    const {
+      url,
+      html,
+    } = await extractHtml();
     const result = await Mercury.parse(url, { html });
     setNewsContent({
       ...newsContent,
       ...{
-        url: result.url,
+        url,
         title: result.title,
         abstract: result.excerpt.slice(0, 200),
         time: result.date_published ? dayjs(result.date_published) : dayjs(),
@@ -120,7 +123,7 @@ function MainContent(props) {
 
           <div className="row">
             <label htmlFor="url">
-              {chrome.i18n.getMessage('Stack_Form_Title')}
+              {browser.i18n.getMessage('Stack_Form_Title')}
             </label>
             <Input
               id="url"
@@ -134,7 +137,7 @@ function MainContent(props) {
 
           <div className="row">
             <label htmlFor="abstract">
-              {chrome.i18n.getMessage('Stack_Form_Description')}
+              {browser.i18n.getMessage('Stack_Form_Description')}
             </label>
             <Input
               id="abstract"
@@ -148,7 +151,7 @@ function MainContent(props) {
 
           <div className="row">
             <label htmlFor="date">
-              {chrome.i18n.getMessage('Stack_Form_Time')}
+              {browser.i18n.getMessage('Stack_Form_Time')}
             </label>
             <DatePicker
               style={{ width: '100%' }}
@@ -162,7 +165,7 @@ function MainContent(props) {
 
           <div className="row">
             <label htmlFor="comment">
-              {chrome.i18n.getMessage('Stack_Form_Comment')}
+              {browser.i18n.getMessage('Stack_Form_Comment')}
             </label>
             <Input
               id="comment"
@@ -176,7 +179,7 @@ function MainContent(props) {
 
           <div className="row">
             <label htmlFor="events">
-              {chrome.i18n.getMessage('Stack_Form_RelatedTimeline')}
+              {browser.i18n.getMessage('Stack_Form_RelatedTimeline')}
             </label>
             <Select
               id="events"
@@ -199,11 +202,18 @@ function MainContent(props) {
               loading={submitting}
               onClick={onSubmitClick}
             >
-              {chrome.i18n.getMessage('UI_Add_To_Event_Button')}
+              {browser.i18n.getMessage('UI_Add_To_Event_Button')}
             </Button>
           </div>
         </div>
       </div>
+      <style jsx="true">
+        {`
+          body {
+            height: 570px;
+          }
+        `}
+      </style>
     </div>
   );
 }

diff --git a/src/components/Popup/index.jsx b/src/components/Popup/index.jsx
@@ -8,12 +8,15 @@ import Footer from './Footer';
 import {
   WAVE_EVENTS,
 } from '../../common/constants';
+import { setGlobalVariables } from '../../common/utils';
+
+setGlobalVariables();
 
 function Popup(props) {
   const [profile, setProfile] = useState(props.profile);
 
   useEffect(() => {
-    chrome.runtime.sendMessage(
+    browser.runtime.sendMessage(
       {
         event: WAVE_EVENTS.REFRESH,
       },
@@ -33,10 +36,10 @@ function Popup(props) {
       <style jsx="true">
         {`
           html {
-            width: 300px;
           }
 
           body {
+            width: 300px;
             margin: 0;
             background-color: #f6f8fa;
           }
@@ -74,7 +77,7 @@ function Popup(props) {
   );
 }
 
-chrome.runtime.sendMessage(
+browser.runtime.sendMessage(
   {
     event: WAVE_EVENTS.GET_PROFILE,
   },

diff --git a/src/manifest.safari.json b/src/manifest.safari.json