在内容脚本中获取当前选项卡 ID 的方法 - chrome 扩展答案

【问题标题】：Methods to get current tab id in content script - chrome extension在内容脚本中获取当前选项卡 ID 的方法 - chrome 扩展
【发布时间】：2018-06-26 12:51:02
【问题描述】：

我正在尝试在内容脚本中获取当前标签 ID。但它总是失败。我不确定，我做错了什么。

以下是其他主题的一些解决方案，但这些在我的扩展程序中不起作用：

代码 1 - content.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    alert("sent from tab.id=", sender.tab.id);
});

代码 2 - content.js

chrome.extension.sendRequest({
    action: "WhatYouWant"
});

chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
    if (request.action) {
        alert('The response is : ' + request.action);
    }
});

background.js

chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
    if (request.action) {
        // Make what you want
        chrome.tabs.getSelected(null, function (tabs) {
            chrome.tabs.sendRequest(tabs.id, {
                action: "response"
            });
        });
    }
});

manifest.json

...
"background": {
    "scripts": ["background.js"],
    "persistent": true
},

"content_scripts": [{
    "all_frames": true,
    "js": ["content.js"],
    "matches": ["<all_urls>"],
    "run_at": "document_end"
}],
"web_accessible_resources": [
    "content.js"
],
...

注意：这不是重复的主题，其他问题的解决方案对我不起作用。

【问题讨论】：

扩展消息不会将消息传递到发送它的页面。获取选项卡 ID 的常用方法是向您的背景/事件页面发送一条消息，然后该页面使用 sender.tab.id 进行响应。您还可以添加一个 iframe，该 iframe 指向通过 web_accessible_resources 公开的扩展页面 - iframe 可以使用 chrome.tabs.getCurrent 获取自己的选项卡，然后它可以通过 DOM 消息事件（即 window.parent.postMessage）发送到您的内容脚本。
这是从我链接的示例构建的完整工作扩展：puu.sh/AMeR3/4183febc3b.zip
我猜你的尝试方式有问题。安装扩展程序，打开或重新加载网页（如 www.google.com），检查控制台。
您还可以使用 devtools 通过设置断点和检查变量来调试代码。
在没有 TeamViewer 会话或类似的远程访问的情况下，我可以提供尽可能多的帮助，但这不是 StackOverflow 的工作原理。

标签： javascript google-chrome-extension

【解决方案1】：

chrome.tabs.query() 函数返回 tabs 数组。

请参阅此文档： https://developer.chrome.com/extensions/tabs#method-query

当我尝试tabs.query()函数时，回调函数返回所有当前tabS数组。

chrome.tabs.query( {}, function(cbResult){
  console.log(cbResult);});

通过 google 的文档和上面的回调返回，您可以找到正确的选项卡正在使用第一个 query() 参数。

如果第一个参数为 Null，则查询函数返回所有选项卡数组。您可以使用第一个参数缩小候选标签的范围。

Screenshot

【讨论】：

chrome.tabs api 在内容脚本中不可访问：stackoverflow.com/questions/15034859/…

【解决方案2】：

无法在内容脚本中访问 chrome.tabs API：

简单使用（javascript）：

location.href

获取当前网页的 URL。

【讨论】：