如何在当前标签上运行Chrome扩展程序内容脚本

时间:2019-03-24 15:36:04

标签: google-chrome-extension

我有一个chrome扩展程序,可以通过以下方式传递信息: 1. content.js分析页面并将结果发送到background.js 2. popup.js从background.js查询结果并将其显示在popup.html中。

预期的行为::每次用户单击弹出按钮时,他都会看到当前选项卡的分析数据。

当前行为:每次用户单击弹出按钮时,他都会看到其分析的第一个选项卡的分析数据。

我尝试使用chrome.tabs.query,但无法弄清楚。去这里要走什么路?

Content.js (将DOM发送到后台)

var fromDOM = new XMLSerializer().serializeToString(document);
console.log(fromDOM);

chrome.runtime.sendMessage({method:'setTitle',title:fromDOM});

Background.js (内容和弹出窗口之间的代理)

var title;
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
  if(message.method == 'setTitle')
    title = message.title;
  else if(message.method == 'getTitle')
    sendResponse(title);
});

popup.js (显示DOM)

chrome.runtime.sendMessage({method:'getTitle'}, function(response){
    document.querySelector("p").textContent = response;
  });  

清单

{
    "manifest_version": 2,
    "name": "B",
    "version": "0.1",
    "options_page": "options.html",
    "background" : {
        "scripts": ["background.js"]
    },
    "permissions": [
        "storage",
        "tabs"
    ],

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },

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

}

0 个答案:

没有答案