时间戳

首页 > 解决方案 > Chrome 扩展通过 chrome.runtime.onMessage 传递当前选项卡 url

javascript - Chrome 扩展通过 chrome.runtime.onMessage 传递当前选项卡 url

问题描述

我正在尝试为 chrome 构建网络注释阅读器扩展。我的问题是我无法在后台脚本中获取活动标签 URL（顺便说一句，我不知道这是否是正确的术语）。让我给你看一下代码。这是来自“highlight.js”文件

chrome.runtime.onMessage.addListener(msgObj => {
  if (msgObj.action == "getData") {
    var annotations = msgObj.annotations;

    // Messaging 2
    chrome.runtime.sendMessage({ action: "getURL" }, (response) => {
      alert(response.data)
    });

    // I want to have current tab url here...
  }

  // ...

});

而我的“eventPage.js”是

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  // Messaging 1
  // ...

  // Messaging 2
  if (request.action === "getURL") {

    chrome.tabs.query({ 'active': true, 'lastFocusedWindow': true }, function (tabs) {
      // I want url_ to be transferred to highlight.js but no luck so far...
      const url_ = tabs[0].url;
      sendResponse({ data: url_ });
      return true;
    });
  }
});

我的清单文件是：

{
  "manifest_version":2,
  "name":"Annotation Reader",
  "version": "1.0",
  "description":"An annotation reader extension!",
  "icons": {
    "128": "icon128.png",
    "48": "icon48.png",
    "16":"icon16.png"
  },
  "browser_action": {
    "default_icon": "icon128.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": [
      "jquery-3.4.1.min.js",
      "eventPage.js"
    ],
    "persistent":false
  },  
  "permissions": [
    "tabs",
    //...
  ],
  "content_scripts": [
    {
      "matches": 
      [
        // ...
      ],
      "js": [
        "jquery-3.4.1.min.js",
        "jquery.highlight.js",
        "highlight.js"
      ],
      "css": ["highlight.css"]
    }
  ]
}

先感谢您！

标签： javascriptgoogle-chrome-extension

解决方案

  1. 不需要消息，只需location.href在内容脚本中使用。每个匹配的选项卡/框架都运行自己的内容脚本实例，因此诸如 DOMdocument或window或location属于选项卡/框架的内容。

  2. 虽然这里不需要，但是当sendResponse异步使用时（扩展 API 中的回调chrome总是异步调用），消息端口需要通过从 onMessage 侦听器返回来保持打开状态true，而不是从嵌套回调中返回。

    if (something) {
  asyncCall(params, result => {
    sendResponse(result);
  });
  return true;
}

  3. 内容脚本在所有匹配的选项卡/框架中运行，而不仅仅是活动选项卡，因此消息可以来自非活动选项卡。这意味着 chrome.tabs.query 是错误的方法。正确的解决方案是，sender.url如果需要 URL，则直接使用。使用文档来了解参数，这样您就不必重新发明轮子。

推荐阅读