Question

我正在为我的网站开发我的第一个浏览器扩展。

此扩展程序基本上应该执行的操作是浏览器操作，该操作将打开一个弹出窗口，您可以在其中编辑当前页面的特定cookie值。

但是，cookie A可以存在于页面/上，而cookie B可以存在于页面/checkout上。因此，我不想列出弹出窗口中的每个cookie，而只列出当前页面中处于活动状态的cookie。

因此，我搜索了文档，发现为了在网页和附件之间进行通信，您必须按照此处所述使用消息系统

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Communicating_with_the_web_page

为此，我的网站上有一个JavaScript文件，该文件加载在每个页面上。在此JavaScript中，我正在执行以下代码

window.postMessage({type: 'FROM_PAGE', data: visibleCookies}, '*');

这段代码肯定已执行，因为我在该语句之前或之后放置了console.log，可以看到它正在被记录。

现在，在我的内容脚本中，我想通过执行以下代码来收听此内容

// experimentManager.js
console.log('testd');
window.addEventListener('message', (event) => {
    console.log(event);
    if (event.source !== window) {
        return;
    }
});

但是，console.log(event);从未执行。监听器永远不会被激活。当我按浏览器操作以打开弹出窗口时，testd已登录到控制台，但是，侦听器仍然没有任何事件。只是没有被执行。

我不知道哪些文件相关，但这是我的manifest.json

// manifest.json
{
  "manifest_version": 2,
  "name": "My first addon",
  "version": "1.0",

  "description": "My first addon description",

  "icons": {
    "48": "icons/icon.png"
  },
  "browser_action": {
    "default_icon": "icons/icon.png",
    "default_title": "My first addon",
    "default_popup": "popup/manage_experiment.html",
    "browser_style": true
  },
  "permissions": [
    "tabs",
    "cookies",
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": ["*://*.mydomain/*"],
      "js": ["experimentManager.js"]
    }
  ]
}

在弹出脚本中，我正在执行此代码

browser.tabs.executeScript({file: "/content_scripts/experimentManager.js"})
    .then(manageExperiments)
    .catch(handleError);

这可能是执行console.log('testd')的原因，但仅此而已？

我想念什么？

内容脚本未监听消息事件

0 个答案: