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

罗伯特·莫钦斯基

我尝试编写一个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>
尼提·纳朗

为此,除了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);
    })
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

简单的Chrome扩展程序:在新标签页中打开一个网址

Chrome扩展程序:URL未在新标签页中打开

Google Chrome扩展程序-简单的jQuery,可在浏览器中打开标签

Chrome扩展程序-在新标签页中打开捕获的屏幕截图

Chrome扩展程序:如何在新标签页中打开链接?

单击工具栏图标时,在新标签页中打开Chrome扩展程序

Chrome扩展程序:如何在新标签页中显示背景图片

Chrome扩展程序在新标签页上打开新标签页

从已经运行的进程中打开Chrome扩展程序的背景页面

如何从Chrome扩展程序中打开的窗口获取背景页面?

将内容写入Chrome扩展程序中的新空白标签

Chrome扩展程序在新标签页中运行js

新标签中的Google Chrome扩展程序默认

Chrome扩展程序-打开多个标签

关闭按钮可在Chrome扩展程序弹出窗口中打开新的Chrome存储标签

Chrome扩展程序在页面操作中显示弹出窗口

无法使用Chrome扩展程序弹出窗口中的按钮打开新标签页

Chrome扩展程序:打开新标签页,而不会失去弹出窗口的焦点

编辑 Chrome 扩展程序(Adblock)代码,使其在安装时不会打开新标签页

我怎么知道我的Chrome扩展程序是从“新标签页”页面调用的?

在浏览器中打开的Chrome扩展程序页面可以与背景页面进行通信吗?

如何在我自己的扩展程序中获取刚打开的页面而不是 chrome 特殊页面

我的Chrome扩展程序在扩展程序页面中未显示48x48图标

Chrome扩展程序不显示内容脚本中的数据

GWT在新标签页中打开页面

在新标签页中打开页面

图片未显示在页面上-在新标签页中打开会显示index.php

Chrome 扩展:点击 popup.html 中的按钮,打开新标签,填写输入

Chrome中的Mailto链接打开新标签