|
| 1 | +--- |
| 2 | +title: Architecture |
| 3 | +--- |
| 4 | + |
| 5 | +This technical documents talks a bit about the different architectures Witchcraft has had over time, the problems faced and how they were solved. |
| 6 | + |
| 7 | +## Version 2 |
| 8 | + |
| 9 | +Up until Witchcraft v2, the architecture was composed of a background script, a content script and the popup window. These are the relevant parts of the manifest file: |
| 10 | + |
| 11 | +```json title="manifest.json (excerpt)" |
| 12 | + "content_scripts": [{ |
| 13 | + "all_frames": true, |
| 14 | + "run_at": "document_start", |
| 15 | + "matches": ["http://*/*", "https://*/*"], |
| 16 | + "js": ["content-script.js"] |
| 17 | + }], |
| 18 | + "background": { |
| 19 | + "page": "background.html", |
| 20 | + "persistent": false |
| 21 | + }, |
| 22 | + "content_security_policy": "script-src 'self'; object-src 'self'" |
| 23 | +``` |
| 24 | + |
| 25 | +This is how it worked: |
| 26 | + |
| 27 | +1. The content script was injected into every frame of every tab (the `content_scripts.matches` property) |
| 28 | + |
| 29 | +2. at `document_start`, the content script sent a message to the background script passing `window.location` as argument: |
| 30 | + |
| 31 | + ```js title="content-script.js (excerpt)" |
| 32 | + chrome.runtime.sendMessage(location); |
| 33 | + ``` |
| 34 | + |
| 35 | +3. the background would listen for these messages (via `chrome.runtime.onMessage.addListener()`), receive the message and fetch all the scripts that could be applied to that URL |
| 36 | + |
| 37 | +4. the background script would then send each loaded script as text to the content script at, using `chrome.tabs.sendMessage()`, targeting the specific tab and frame |
| 38 | + |
| 39 | +5. the content script would then run the script like so: |
| 40 | + |
| 41 | + ```js title="content-script.js (excerpt, simplified version)" |
| 42 | + chrome.runtime.onMessage.addListener(scriptContents => { |
| 43 | + Function(scriptContents)(); |
| 44 | + }); |
| 45 | + ``` |
| 46 | + |
| 47 | + *(CSS worked similarly, but instead of using `Function()`, it would create a `<style>` element and append it to the document's `<head>`)* |
| 48 | + |
| 49 | +The background script would keep an in-memory cache of what scripts were loaded for which tab/frame, mainly used to show the counter in the extension icon and the list of scripts in the popup window. |
| 50 | + |
| 51 | +### Problems with v2 |
| 52 | + |
| 53 | +The first problem appeared when Chrome changed behavior and started unloading extensions at its own will. Extensions that relied on caching data in memory would lose information and stop working - and that affected Witchcraft v2, which started showing erratic behavior. See more about this [here](https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers?utm_source=chatgpt.com#persist-states). |
| 54 | + |
| 55 | +The second (and most important) problem was that Google [announced](https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline) that Manifest v2 was being deprecated and that all extensions should migrate to Manifest v3. Migrating to Manifest v3 was not a simple task, because it introduced a few breaking changes that directly affected Witchcraft. |
| 56 | + |
| 57 | +## Version 3 |
| 58 | + |
| 59 | +This was a major rewrite of the extension to comply with Chrome's manifest v3. The extension now has a service worker instead of a background page, and uses the new `chrome.scripting` API to inject scripts into pages - not the [ideal solution](https://github.com/Tampermonkey/tampermonkey/issues/644#issuecomment-1140110430), but works for sites that don't have strict Content Security Policies (CSPs). |
| 60 | + |
| 61 | +The content script was dropped and the service worker now handles the loading and injecting of scripts directly, listening for `chrome.webNavigation.onCommitted` events to know when to inject scripts. |
| 62 | + |
| 63 | +```js title="background.js (excerpt, simplified)" |
| 64 | +chrome.webNavigation.onCommitted(async details => { |
| 65 | + const { url, tabId, frameId } = details; |
| 66 | + await loader.loadScripts(url, tabId, frameId); |
| 67 | +}); |
| 68 | +``` |
| 69 | + |
| 70 | +And then eventually: |
| 71 | + |
| 72 | +```js title="inject-js.js (excerpt, simplified)" |
| 73 | +chrome.scripting.executeScript({ |
| 74 | + injectImmediately: true, |
| 75 | + target: { tabId: tabId, frameIds: [frameId] }, |
| 76 | + func: (contents) => Function(contents)(), |
| 77 | + args: [contents], |
| 78 | + world: "MAIN" |
| 79 | +}); |
| 80 | +``` |
| 81 | + |
| 82 | +A breaking change is that now scripts are injected into the "main world" of the page, which means that they have direct access to the page's JavaScript context. This wasn't like that in v2, where scripts were injected into an "isolated world", which meant that they didn't have direct access to the page's JavaScript context and had to manually inject script tags into the page to run code in the page's context. |
| 83 | + |
| 84 | +## Version 3.2 |
| 85 | + |
| 86 | +One interesting problem is that `chrome.scripting.executeScript()` respects the Content Security Policy (CSP) of the page, which means that if a page has a CSP that disallows `eval()` (or similar), scripts that use `Function()` or `eval()` will fail to run. The same is also true for pages that disallow the injection of `<script>` tags via the CSP rule `script-src 'self'`. |
| 87 | + |
| 88 | +To solve this, in v3.2 the architecture was changed to use the very recent API `chrome.userScripts.execute()`, which allows injecting scripts into pages without being affected by the page's CSP. The only gotcha is that now the user has to explicitly enable the "Allow user scripts" permission in the extension's settings. |
| 89 | + |
| 90 | +Since few pages are affected by CSP rules (most sites nowadays doesn't seem to enforce strict CSPs), the change was made that if the user hasn't enabled the "Allow user scripts" permission, the extension will fall back to using `chrome.scripting.executeScript()`: |
| 91 | + |
| 92 | +```js title="inject-js.js (excerpt, simplified)" |
| 93 | + if (isUserScriptsEnabled()) { |
| 94 | + chrome.userScripts.execute({ |
| 95 | + injectImmediately: true, |
| 96 | + target: { tabId: tabId, frameIds: [frameId] }, |
| 97 | + js: [{ |
| 98 | + code: contents, |
| 99 | + }], |
| 100 | + world: "MAIN" |
| 101 | + }); |
| 102 | + } else { |
| 103 | + chrome.scripting.executeScript({ |
| 104 | + injectImmediately: true, |
| 105 | + target: { tabId: tabId, frameIds: [frameId] }, |
| 106 | + func: (contents) => Function(contents)(), |
| 107 | + args: [contents], |
| 108 | + world: "MAIN" |
| 109 | + }); |
| 110 | + } |
| 111 | +``` |
| 112 | + |
| 113 | +## Version 3.3 |
| 114 | + |
| 115 | +Another outsanding problem with v3 is that scripts are being injected too late when compared to v2. In v2, scripts were injected at `document_start` - before `DOMContentLoaded` - which is the earliest possible moment to run scripts in a page. In v3, `DOMContentLoaded` has already fired by the time the service worker receives the `onCommitted` event. |
| 116 | + |
| 117 | +To fix that, v3.3 brings back the content script that used to exist in v2. That way, we can now be notified at `document_start` and have the chance to load scripts earlier. The difference is that back in v2, the content script was responsible for loading and injecting scripts, while now it just notifies the service worker that a new frame has loaded and the service worker is the one that loads and injects scripts. |
0 commit comments