Firefox插件收听单击扩展按钮

Question

我正在制作一个与每个网站兼容的深色主题插件。

我正在尝试使我的插件的按钮表现得像当前活动选项卡的开/关开关一样。

---

第一次尝试：

这是您可以从 doc

如果您提供弹出窗口，则在用户单击时打开弹出窗口 按钮，以及在弹出窗口中运行的JavaScript可以处理 用户与它的互动。如果您不提供弹出窗口，请单击 当事件被派往扩展名的背景脚本时 用户单击按钮。

因此，我应该收到一个“点击”事件，对吗？

清单

{
  "manifest_version": 2,
  "name": "DarkTheme",
  "version": "1.0",
  "description": "Create a dark theme for any webpage.",
  "icons": {
    "48": "dark.png"
  },
  "browser_action": {
    "default_icon": "dark.png",
    "default_title": "DarkTheme"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "dark.js"
      ]
    }
  ]
}

dark.js

document.addEventListener('click', () => console.log('clicked'))

没有收到任何事件。

---

第二次尝试

我找到在这里我应该使用 browser.browseraction 而不是。让我们尝试一下：

dark.js

browser.browserAction.onClicked.addListener(() => console.log('happened'));

什么也没收到...

---

第三尝试：

如果您仔细阅读文档，您会意识到，单击事件似乎只发送到背景脚本。因此，我们在这里走：

{
  "manifest_version": 2,
  "name": "DarkTheme",
  "version": "1.0",
  "description": "Create a dark theme for any webpage.",
  "icons": {
    "48": "dark.png"
  },
  "browser_action": {
    "default_icon": "dark.png",
    "default_title": "DarkTheme"
  },
  "background": {
    "scripts": [
      "button.js"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "dark.js"
      ]
    }
  ]
}

button.js

document.addEventListener('click', () => console.log('clicked'))

我看不到任何日志...

---

第四尝试：

我找到这个主题这表明我应该使用executecript。

在这里，我做了什么：

{
  "manifest_version": 2,
  "name": "DarkTheme",
  "version": "1.0",
  "description": "Create a dark theme for any webpage.",
  "icons": {
    "48": "dark.png"
  },
  "background": {
    "scripts": [
      "button.js"
    ]
  },
  "permissions": [
    "tabs"
  ],
  "browser_action": {
    "default_icon": "dark.png",
    "default_title": "DarkTheme"
  }
}

let disabled = false;
// On click, we disable the plugin
browser.browserAction.onClicked.addListener(tabId => {
  disabled = !disabled
  // This works
  browser.browserAction.setIcon({ path: disabled ? '/light.png' : '/dark.png' });
  // This works
  if (disabled) return browser.tabs.reload()
  // This doesn't work.
  else browser.tabs.executeScript(tabId, {
    file: '/dark.js',
    allFrames: true,
  });
});
// This should run the script without waiting for the user to press the button, but it doesn't work either.
browser.tabs.executeScript(undefined, {
  file: '/dark.js',
  allFrames: true,
})

以这种方式加载脚本似乎不起作用。我没有收到来自Dark.js的日志

Tabid可选

 整数。运行脚本的选项卡的ID。

默认为当前窗口的活动选项卡。
 

---

剩余的问题：

1. 将脚本加载在每个网页上，就好像它在 content_scripts

   中一样

2. 加载脚本时，禁用是false。

Answer 1

我终于做到了！

清单

{
  "manifest_version": 2,
  "name": "DarkTheme",
  "version": "1.0",
  "description": "Create a dark theme for any webpage.",
  "icons": {
    "48": "dark.png"
  },
  "background": {
    "scripts": [
      "button.js"
    ]
  },
  "permissions": [
    "tabs"
  ],
  "browser_action": {
    "default_icon": "dark.png",
    "default_title": "DarkTheme"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "dark.js"
      ]
    }
  ]
}

。

let disabled = false;
browser.browserAction.onClicked.addListener(tab => {
  disabled = !disabled
  browser.browserAction.setIcon({ path: disabled ? '/light.png' : '/dark.png' });
  if (disabled) return browser.tabs.reload(tab.id).then(() => {
    browser.tabs.executeScript(tab.id, {
      code: 'window.disabled = true;',
      allFrames: true,
    })
  })
  else browser.tabs.executeScript(tab.id, {
    code: 'window.disabled = false;'
  }).then(() => {
    browser.tabs.executeScript(tab.id, {
      file: '/dark.js',
      allFrames: true,
    });
  })
});

这是 禁用您的插件。