简单的 chrome 扩展打开新标签并显示页面中的数据答案

【问题标题】：Simple chrome extension opening new tab and showing data from page简单的 chrome 扩展打开新标签并显示页面中的数据
【发布时间】：2018-01-11 21:46:22
【问题描述】：

我尝试编写一个 chrome 扩展，从当前页面的 window 对象读取数据，打开一个新选项卡并在那里显示数据。

你知道一个简单的例子吗？

我目前的问题是我无法写入打开的标签。

manifest.json

{
    "manifest_version": 2,
    "name": "Inspector",
    "version": "0.1",
    "permissions" : ["tabs"],
    "content_scripts": [{
        "matches": [
            "<all_urls>"
        ],
        "js": ["jquery-3.2.1.min.js", "content.js"]
    }],
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "Inspector"
    },
    "background": {
        "scripts": ["background.js"]
    }
}

content.js

将带有文档标题的消息发送到后台。

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.message === "clicked_browser_action") {
            chrome.runtime.sendMessage({
                "message": "open_new_tab",
                "title": document.title
            });
        }
    }
);

background.js

收到标题并尝试将其写入打开的标签。

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, function (tabs) {
        var activeTab = tabs[0];
        chrome.tabs.sendMessage(activeTab.id, {
            "message": "clicked_browser_action"
        });
    });

    chrome.runtime.onMessage.addListener(
        function (request, sender, sendResponse) {
            if (request.message === "open_new_tab") {
                chrome.tabs.create({
                    "url": "inspector.html"
                }, (tab) => {
                    setTimeout(() => {
                        //use your message data here.
                        chrome.tabs.executeScript(tab.id, {code: "document.title = request.title"})
                    }, 3000)
                })
            }
        }
    )
});

inspector.html

空白页。

<html>
<head></head>
<body></body>
</html>

【问题讨论】：

标签： google-chrome google-chrome-extension

【解决方案1】：

除了 manifest.json 之外，您还需要 2 个脚本 - 内容脚本、后台脚本

过程将是：-

1)使用内容脚本从当前页面获取数据。

2) 使用您的数据通知后台并作为来自内容脚本的消息传递。

3)在后台脚本中接收新消息并使用消息数据创建新选项卡。

例如- 从当前页面传递标题，并在新标签中设置。

内容脚本 -

//send current window title to background js.
chrome.runtime.sendMessage({'title': window.title})

后台脚本-

//receive message
chrome.runtime.onMessage((message, sender) => { 
    chrome.tabs.create({url: 'NEW URL'}, (tab) => {
        setTimeout(() => {
            //use your message data here.
            chrome.tabs.executeScript(tab.id, {code: "document.title = message.title"})
        }, 3000);
    })
});

【讨论】：

还是不行。 chrome.tabs.create 似乎无法访问 window 对象。已经尝试使用window.title = "foo"。在我的问题中添加了代码 sn-ps。
您需要“标签”权限才能执行此操作。在 manifest.json 中添加 => 权限：["tabs"]。如果您仍然遇到任何问题，请告诉我！哦，请稍等，我正在查看代码。
好吧，我的错，在 background.js 中，您无权访问特定选项卡的窗口对象。你可以通过注入js来做到这一点我已经更新了我的答案。
或者您可以再次将消息从背景发送到内容脚本，这样您就可以访问完整的“窗口”对象。
document.title 在打开的选项卡上是空的。还是不行。我的目标是从当前页面读取数据，打开一个新标签并在那里显示。我找不到这样的例子。