Inject content script from service worker

Author: kungfux

CONTRIBUTING.md

@@ -0,0 +1,37 @@
+# Contributing Guidelines
+
+Thank you for considering contributing to this project! Appreciate your interest and effort in helping to make it better.
+
+## Browser Compatibility
+
+All changes to the code should be tested on Firefox, Chrome, and ideally in Edge to ensure cross-browser compatibility.
+
+We use [webextension-polyfill](https://github.com/mozilla/webextension-polyfill) along with [@types/webextension-polyfill](https://www.npmjs.com/package/@types/webextension-polyfill) to make this happen.
+
+## Code Formatting
+
+We use Prettier to enforce consistent code formatting across the project. Please make sure that your code adheres to the Prettier rules before submitting a pull request.
+
+## Code Quality
+
+We use ESLint to enforce code quality standards. Please make sure that your code passes the ESLint checks before submitting a pull request.
+
+## General Rules
+
+Here are some general rules to follow when contributing to this project:
+
+- Please make sure that your contributions are well-documented and easy to understand
+- Avoid committing binary files or dependencies to the repository
+- Make sure that your commits are atomic and contain only related changes
+- If your contribution is a bug fix, please include a use case to reproduce
+- Be respectful and considerate when communicating with other contributors and maintainers
+
+Thank you for your contributions and support for our project!
+
+# Documentation References
+
+- [Firefox Extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
+- [Chrome Extensions](https://developer.chrome.com/docs/extensions/mv3/)
+
+- [TypeScript](https://www.typescriptlang.org/docs/)
+- [WebPack](https://webpack.js.org/concepts/)

package.json

@@ -30,6 +30,7 @@
   "homepage": "https://github.com/kungfux/jira-issue-expert#readme",
   "devDependencies": {
     "@eslint-recommended/eslint-config-typescript": "^17.0.3",
+    "@types/webextension-polyfill": "^0.10.0",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.38.0",
@@ -44,5 +45,8 @@
     "webpack": "^5.79.0",
     "webpack-cli": "^5.0.1",
     "webpack-merge": "^5.8.0"
+  },
+  "dependencies": {
+    "webextension-polyfill": "^0.10.0"
   }
 }

src/background/index.ts

@@ -0,0 +1,6 @@
+import { Settings } from '../settings';
+import { ServiceWorker } from './service-worker';
+
+const settings = new Settings().getSettings();
+const serviceWorker = new ServiceWorker(settings.urls);
+serviceWorker.init();

src/background/service-worker.ts

@@ -0,0 +1,64 @@
+import type { Tabs, WebNavigation } from 'webextension-polyfill';
+import { tabs, webNavigation, scripting } from 'webextension-polyfill';
+
+export class ServiceWorker {
+  private readonly urls: string[];
+  private readonly urlRegexs: RegExp[];
+
+  public constructor(urls: string[]) {
+    this.urls = urls;
+    this.urlRegexs = [];
+    for (const url of this.urls) {
+      this.urlRegexs.push(new RegExp(url, 'i'));
+    }
+  }
+
+  public init(): void {
+    tabs.onUpdated.addListener((tabId, changeInfo, tabInfo) => {
+      void this.onTabUpdated(tabId, changeInfo, tabInfo);
+    });
+    webNavigation.onCompleted.addListener((details) => {
+      void this.onNavigationCompleted(details);
+    });
+  }
+
+  public async onTabUpdated(
+    tabId: number,
+    changeInfo: Tabs.OnUpdatedChangeInfoType,
+    tabInfo: Tabs.Tab
+  ): Promise<void> {
+    if (changeInfo.url !== undefined && this.isJiraUrl(changeInfo.url)) {
+      await this.injectContentScript(tabId);
+    }
+  }
+
+  public async onNavigationCompleted(
+    details: WebNavigation.OnCompletedDetailsType
+  ): Promise<void> {
+    if (details.url.length > 0 && this.isJiraUrl(details.url)) {
+      await this.injectContentScript(details.tabId);
+    }
+  }
+
+  private isJiraUrl(url: string): boolean {
+    for (const x of this.urlRegexs) {
+      if (x.test(url)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private async injectContentScript(tabId: number): Promise<void> {
+    try {
+      await scripting.executeScript({
+        target: {
+          tabId,
+        },
+        files: ['content.bundle.js'],
+      });
+    } catch (error) {
+      console.error(`Failed to inject content script: ${String(error)}`);
+    }
+  }
+}

src/content/index.ts

@@ -0,0 +1,15 @@
+import { IssueExpert } from './issue-expert';
+
+declare global {
+  interface Window {
+    hasRun: boolean;
+  }
+}
+
+(function run() {
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+  new IssueExpert().print();
+})();

src/content/issue-expert.ts

@@ -0,0 +1,5 @@
+export class IssueExpert {
+  print(): void {
+    console.log('Hello there');
+  }
+}

src/index.ts

@@ -1 +1,6 @@
-{}
+{
+  "background": {
+    "service_worker": "background.bundle.js",
+    "type": "module"
+  }
+}

src/manifest.chrome.json

@@ -1,4 +1,8 @@
 {
+  "background": {
+    "scripts": ["background.bundle.js"],
+    "type": "module"
+  },
   "browser_specific_settings": {
     "gecko": {
       "id": "{eb6d1100-3fa7-4869-8370-11bc3e058fe1}",

src/manifest.firefox.json

@@ -7,11 +7,6 @@
     "48": "icons/logo48.png",
     "128": "icons/logo128.png"
   },
-  "content_scripts": [
-    {
-      "matches": ["*://*.atlassian.net/jira/*"],
-      "js": ["bundle.js"]
-    }
-  ],
-  "host_permissions": ["*://*.atlassian.net/jira/*"]
+  "permissions": ["tabs", "webNavigation", "scripting", "activeTab"],
+  "host_permissions": ["<all_urls>"]
 }