feat: firefox supoort, but block on logseq cors config #4

Want to support firefox, but block by issue
logseq/logseq#8649 now.

Author: EINDEX

README.md

@@ -2,7 +2,7 @@
 
 [![Build](https://github.com/EINDEX/logseq-copilot/actions/workflows/build.yml/badge.svg)](https://github.com/EINDEX/logseq-copilot/actions/workflows/build.yml) ![Visitors](https://visitor-badge.glitch.me/badge?page_id=eindex.logseq-copliot&left_color=green&right_color=red) ![License](https://img.shields.io/github/license/eindex/logseq-copilot)
 
-**The project is in the early stage of development, and the current version is only a prototype.**
+**The project is in the early stage of development, and the current version just MVP.**
 
 Logseq Copilot is a Chrome extension that allows you to access your Logseq using your browser. Logseq is a privacy-first, open-source platform for knowledge sharing and management. With Logseq Copilot, you can easily retrieve relevant information from your Logseq graph and enrich your online search, reading, learning experience. 🧠
 
@@ -12,7 +12,8 @@ Logseq Copilot is a Chrome extension that allows you to access your Logseq using
 
 ## Features
 
-- Show Logseq blocks when you search on Google via your keywords.🔍
+- 🔍 Show Logseq content when you search on popular searching engines via your keywords. Now support Google, Bing, Baidu, Yandex, DuckDuckGo, SearX.
+
 
 ## Screenshot
 
@@ -39,7 +40,9 @@ How to use this extension, Please follow below steps:
    3. (Optional) Enable auto start server when Logseq lunched.
       ![](docs/screenshots/enable-auto-start.png)
 
-3. Install this extension. Now this extenstion is under review by chrome extenstions store and edge add-ons. So you can go to [release page](https://github.com/EINDEX/logseq-copilot/releases) download it.
+3. Install this extension. 
+   - Store version(Recommend): [Chrome](https://chrome.google.com/webstore/detail/logseq-copilot/hihgfcgbmnbomabfdbajlbpnacndeihl), [Edge](https://chrome.google.com/webstore/detail/logseq-copilot/ebigopegbohijaikegebaaboaomaifoi)
+   - Newest Version [release page](https://github.com/EINDEX/logseq-copilot/releases) download it.
 
 4. Go to Options page to setting the connection.
    If you setting correct, you will see a message show on your Logseq and options page will show connected.
@@ -48,13 +51,16 @@ How to use this extension, Please follow below steps:
 
 ## Roadmap
 
--[x] CI/CD: Set up a continuous integration and delivery pipeline for the extension development and deployment. 🚦
+- [x] 🚦 CI/CD: Set up a continuous integration and delivery pipeline for the extension development and deployment. 🚦
+
+- [x] 🔍 Support other search engines: Extend the functionality of the extension to other popular search engines, such as Bing, DuckDuckGo, and Baidu. 
+- [x] 💅 Style enhancement: Improve the appearance and usability of the extension interface and the blocks display.
+- [ ] 🌐 Support Firefox.
+- [ ] 🆕 Browser new tab page queries: Add an option to show Logseq blocks on the browser's new tab page based on predefined or random queries. 
+- [ ] QuickCapture & advance quick capture, easy and fast making note in Logseq.
 
-- Support other search engines: Extend the functionality of the extension to other popular search engines, such as Bing, DuckDuckGo, and Baidu. 🌎
-- Style enhancement: Improve the appearance and usability of the extension interface and the blocks display. 💅
-- Enhance search ranking for better blocks: Implement a more sophisticated algorithm for ranking the blocks based on their relevance to the search query and the user preferences. 📊
-- Query enhance to recall more blocks: Implement a more flexible and powerful query system for retrieving the blocks from the Logseq graph, such as using natural language or advanced operators. 🗣️
-- Browser new tab page queries: Add an option to show Logseq blocks on the browser's new tab page based on predefined or random queries. 🆕
+- ~~Enhance search ranking for better blocks: Implement a more sophisticated algorithm for ranking the blocks based on their relevance to the search query and the user preferences. 📊~~ Now this feature depends on Logseq Searing API
+- ~~Query enhance to recall more blocks: Implement a more flexible and powerful query system for retrieving the blocks from the Logseq graph, such as using natural language or advanced operators. 🗣️~~ Now this feature depends on Logseq Searing API
 
 _Welcoming more ideas._
 

build.mjs

@@ -101,6 +101,14 @@ async function build() {
   );
   await zipFolder(`./${outdir}/edge`);
 
+  // firefox
+  await copyFiles([...commonFiles], `./${outdir}/firefox`);
+  await fs.writeFile(
+    `./${outdir}/firefox/manifest.json`,
+    JSON.stringify(getManifest('firefox')),
+  );
+  await zipFolder(`./${outdir}/firefox`);
+
   console.log('Build success.');
 }
 

package.json

@@ -34,9 +34,9 @@
     "@semantic-release/github": "^8.0.7",
     "@semantic-release/npm": "^9.0.2",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@types/chrome": "^0.0.202",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "@types/webextension-polyfill": "^0.10.0",
     "archiver": "^5.3.1",
     "autoprefixer": "^10.4.13",
     "chokidar-cli": "^3.0.0",
@@ -67,6 +67,7 @@
     "tailwindcss": "^3.2.6",
     "ts-loader": "^9.4.2",
     "type-fest": "^3.5.2",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "webextension-polyfill": "^0.10.0"
   }
 }

pnpm-lock.yaml

@@ -1,3 +1,5 @@
+import Browser from 'webextension-polyfill'
+
 export type LogseqCopliotConfig = {
   logseqHost: string;
   logseqAuthToken: string;
@@ -6,7 +8,7 @@ export type LogseqCopliotConfig = {
 export const getLogseqCopliotConfig =
   async (): Promise<LogseqCopliotConfig> => {
     const { logseqHost = 'http://localhost:12315', logseqAuthToken = '' } =
-      await chrome.storage.local.get();
+      await Browser.storage.local.get();
     return {
       logseqHost,
       logseqAuthToken,
@@ -17,5 +19,5 @@ export const saveLogseqCopliotConfig = async (
   updates: Partial<LogseqCopliotConfig>,
 ) => {
   console.log('saveLogseqCopliotConfig', updates);
-  await chrome.storage.local.set(updates);
+  await Browser.storage.local.set(updates);
 };

src/browser.ts

@@ -1,25 +1,46 @@
 const ReleaseFor = {
   chrome: {
+    manifest_version: 3,
     key: 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAnkAYeXnTWrNIu2h8D4xi9NHWLe0eTR3CX8DDw1c0qyCucaCKxkk/+gZcl89Ifyq5joXc/CeQrM3QVjrL1RAXrKZVqTNvBCUh1H1oJJ47nqkKKI6bNZVT8utjFTjDD1ZYXPYzQhsGuP/cY1wIrlhhIuawFW1h+UUwYlYQtS5FcjJ/RPrao+8KwJaS9p3Cei9rWXhE/PV19ZVOqOUx9ZSzj5/OYCB1u1VWFD5BlUbTXSbzyM/VvXZseAVruVy7oRHJ565AH/uPz2ZVL55Gz0LzcHw4HNRc2f+mSVAbHAuK7JDWtRlrZ3Fbav9qBrcVIAxTpnf5B2I2YMBMcu852Vkc3QIDAQAB',
+    background: {
+      service_worker: 'background.js',
+    },
+    web_accessible_resources: [
+      {
+        resources: ['content-script.css', 'assets/img/logo.png'],
+        matches: [],
+      },
+    ],
   },
   edge: {
-    key: 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArg427MiWAPOW6ZtGWebRPWKJHv+IWBczKiyapsmdahLKaVk2YsHJdPhDIMTovcY91hTtwtW7lmJ8CLJHJNoosn52QZ6/qMu4zz5tcnjZA/FM4GN9BaybW/rXhR7LHY0WqKQ5UVYaJoYlNbQif5RnlUYRq2Z+q+bFdP6iJKHEljQjZwv84QFY6Pmln6iBKR7CDBOSr3X917FtzTwIiqnkfSm998+La1dUMfEzfq2qFYq1CuBEFHUtFNU7BCXmnIABefRQygdV9gVqSvyODt756Z2SmvEGhlzla/HVLf+ud84wEXqLnW3I0bvSTGExncxAkM/9fyKjHrGYuuFB9BgnqQIDAQAB',
+    manifest_version: 3,
+    background: {
+      service_worker: 'background.js',
+    },
+    web_accessible_resources: [
+      {
+        resources: ['content-script.css', 'assets/img/logo.png'],
+        matches: [],
+      },
+    ],
+  },
+  firefox: {
+    manifest_version: 2,
+    background: {
+      scripts: ['background.js'],
+    },
+    persistent: true,
+    web_accessible_resources: ['content-script.css', 'assets/img/logo.png'],
   },
 };
 
 const build = (releaseFor) => {
   return {
     version: '0.0.5',
     author: 'eindex.lee@gmail.com',
-    key: ReleaseFor[releaseFor]['key'],
-    manifest_version: 3,
     name: 'Logseq Copilot',
     description:
       'Logseq Copilot, Connect with you logseq API server, bring your information when you browsing.',
-    options_page: 'options.html',
-    background: {
-      service_worker: 'background.js',
-    },
     chrome_url_overrides: {},
     icons: {
       192: 'assets/img/logo.png',
@@ -31,13 +52,13 @@ const build = (releaseFor) => {
         css: ['content-script.css'],
       },
     ],
-    web_accessible_resources: [
-      {
-        resources: ['content-script.css', 'assets/img/logo.png'],
-        matches: [],
-      },
-    ],
     permissions: ['storage'],
+    options_ui: {
+      page: 'options.html',
+      browser_style: false,
+      open_in_tab: true,
+    },
+    ...ReleaseFor[releaseFor],
   };
 };
 

src/config.ts

@@ -1,8 +1,9 @@
 import LogseqClient from '../logseq/client';
+import Browser from 'webextension-polyfill'
 
 const logseqClient = new LogseqClient();
 
-chrome.runtime.onConnect.addListener((port) => {
+Browser.runtime.onConnect.addListener((port) => {
   port.onMessage.addListener((msg) => {
     if (msg.type === 'query') {
       const promise = new Promise(async () => {
@@ -12,7 +13,7 @@ chrome.runtime.onConnect.addListener((port) => {
 
       promise.catch((err) => console.error(err));
     } else if (msg.type === 'open-options') {
-      chrome.runtime.openOptionsPage();
+      Browser.runtime.openOptionsPage();
     }
   });
 });

src/manifest.json.cjs

@@ -3,9 +3,10 @@ import { LogseqSearchResult } from '../../../types/logseq-block';
 import { LogseqResponseType } from '../../logseq/client';
 import { LogseqBlock } from './LogseqBlock';
 import { LogseqPageContent } from './LogseqPageContent';
+import Browser from 'webextension-polyfill'
 
 type LogseqCopliotProps = {
-  connect: chrome.runtime.Port;
+  connect: Browser.Runtime.Port;
 };
 
 export const LogseqCopliot = ({ connect }: LogseqCopliotProps) => {

src/pages/background/index.ts

@@ -1,4 +1,4 @@
-import { LogseqPageContentType } from '../../types/logseq-block';
+import { LogseqPageContentType } from '../../../types/logseq-block';
 import LogseqPageLink from './LogseqPage';
 
 type LogseqPageContentProps = {