wip

src/injections/instagram.css

@@ -0,0 +1 @@
+div:has(> img) + div:empty {pointer-events: none !important;}

src/manifest.json

@@ -165,6 +165,12 @@
         "contextMenus",
         "storage"
     ],
+    "optional_permissions": [
+        "scripting"
+    ],
+    "optional_host_permissions": [
+        "*://www.instagram.com/*"
+    ],
     "commands": {
         "_execute_page_action": {
             "suggested_key": {

src/options.html

@@ -32,6 +32,13 @@
         </fieldset>
         <button type="submit">Save</button>
     </form>
+    <hr />
+    <form id="siteSpecific">
+      <fieldset>
+          <legend>Site-specific settings</legend>
+          <label><input type="checkbox" name="instagram" id="instagramFixup" />Fix Instagram Context Menu</label><br/>
+      </fieldset>
+    </form>
     <script type="module" src="options.js"></script>
   </body>
 </html>

src/options.js

@@ -2,7 +2,7 @@ import {
     BrowserContextMenuManager,
     ContextMenuSetupperImpl,
 } from "./contextMenuManager.js";
-import {BrowserStorageSettings, FormManager} from "./settings.js";
+import {BrowserStorageSettings, FormManager, ScriptsManager} from "./settings.js";
 import { DanbooruURL, getAPI } from "./utils.js";
 
 const [api, isChrome] = getAPI(globalThis);
@@ -39,3 +39,17 @@ async function restoreOptions() {
 document.addEventListener("DOMContentLoaded", restoreOptions);
 form.addEventListener("submit", saveOptions);
 form.url.placeholder = DanbooruURL;
+
+const scripts = {
+    instagram: {
+        matches: ["*://www.instagram.com/*"],
+        css: ["injections/instagram.css"],
+    },
+};
+const scriptsManager = new ScriptsManager(
+    document.forms.siteSpecific,
+    api,
+    scripts,
+);
+
+document.addEventListener("DOMContentLoaded", scriptsManager.onLoad);

src/settings.js

@@ -73,3 +73,75 @@ export class FormManager {
         }
     }
 }
+
+export class ScriptsManager {
+    constructor(form, browser, scripts) {
+        this.form = form;
+        this.browser = browser;
+        this.scripts = scripts;
+
+        this.onLoad = this.onLoad.bind(this);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    async onLoad() {
+        for (const [id, script] of Object.entries(this.scripts)) {
+            const checkbox = this.form[id];
+
+            if (!checkbox) {
+                console.warn("Form has no checkbox with name", id);
+                continue;
+            }
+
+            checkbox.addEventListener("change", this.onChange);
+            checkbox.checked = await this.browser.permissions.contains({
+                origins: script.matches,
+            });
+        }
+    }
+
+    onChange(e) {
+        const {checked, name} = e.target;
+
+        if (checked) {
+            return this.request(name);
+        }
+
+        return this.revoke(name);
+    }
+
+    async request(id) {
+        const script = this.scripts[id];
+
+        if (!script) {
+            return;
+        }
+
+        const granted = await this.browser.permissions.request({
+            permissions: ["scripting"],
+            origins: script.matches,
+        });
+
+        if (!granted) {
+            return;
+        }
+
+        await this.browser.scripting.registerContentScripts([{
+            id: id,
+            matches: script.matches,
+            css: script.css,
+            js: script.js,
+        }]);
+    }
+
+    async revoke(id) {
+        const script = this.scripts[id];
+
+        if (!script) {
+            return;
+        }
+
+        await this.browser.scripting.unregisterContentScripts({ids: [id]});
+        await this.browser.permissions.remove({origins: script.matches});
+    }
+}