Question

我尝试编写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>

Answer 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);
    })
});

简单的镀铬扩展打开新选项卡并显示页面中的数据

1 个答案: