Question

我的代码的简化版本：

的manifest.json

{
    "manifest_version": 2,
    "name": "name",
    "version": "1.0",
    "description": "description",
    "icons":
    {
        "16": "icon16.png",
        "32": "icon32.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "browser_action":
    {},
    "background":
    {
        "scripts": ["background.js"]
    },
    "permissions": ["contextMenus", "tabs", "downloads", "<all_urls>", "webRequest", "webRequestBlocking"],
    "web_accessible_resources": ["background.css"]
}

background.js

chrome.browserAction.onClicked.addListener(function(tab)
{
    chrome.tabs.insertCSS({
        file: "sai.css"
    }, function()
    {
        chrome.tabs.executeScript({file: "sai.js"});
    });
    chrome.tabs.executeScript({file: "sendurls.js", allFrames: true});
    chrome.runtime.onMessage.addListener(function(urls)
    {
        chrome.runtime.sendMessage(urls);
    });
});

sendurls.js

var sai =
{
    urls: []
};

console.log("Injected by sendurls.js");
sai.urls = [].slice.apply(document.links).map(function(e){return e.href;});
console.log("Result: ", sai.urls);
chrome.runtime.sendMessage(sai.urls);

sai.css

#headerdiv
{
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    background: #F8F8F8;
    z-index: 999999999999;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

sai.js

var sai =
{
    headerdiv: document.createElement("div"),
    urls: []
}

function closeheaderdiv()
{
    document.body.removeChild(headerdiv);
}

chrome.runtime.onMessage.addListener(function(urls)
{
    var newurl;
    for (var idx in urls)
    {
        newurl = urls[idx];
        newurl.index = sai.urls.length;
        sai.urls.push(newurl);
    }
    alert(sai.urls[0].url);
});

sai.headerdiv.id = "headerdiv";
sai.headerdiv.innerHTML = "overlay div";
sai.headerdiv.onclick = closeheaderdiv;
document.body.appendChild(sai.headerdiv);

我这里有一个基本的Chrome扩展程序，可以在sendurls.js中获取文档中的链接，并尝试使用sai.js作为中间人将其发送到background.js。我仅使用background.js作为中间人，因为直接从sendurls.js向sai.js发送邮件失败，而且仅在background.js我可以使用chrome.tabs据我所知（因为我没有弹出窗口）。我故意没有为这次尝试做一个弹出窗口，因为我想显示一些潜在＆＃34;危险＆＃34; sai.js中的iframe（这是我应该在弹出窗口中提供的），我需要额外的UBlock Origin或UMatrix等扩展安全性，据我所知，这些扩展不会检查/阻止弹出窗口（但是检查/阻止＆＃34;正常＆＃34;页面包含iframe和注入的脚本，也就是目标页面+ sai.js）。基本上，我通过点击扩展图标（即background.js的{{1}}监听器）触发执行，期望从onClicked将链接发送到sai.js ;然后我尝试通过绘制＆＃34;叠加div来操纵页面的DOM。在页面上，我将放置一些按钮，并在页面底部的第二个div中显示我上面谈到的iframe。

我遇到的问题是sendurls.js似乎无法收到包含sai.js或background.js发送的网址的邮件，而且我没有“{1}}。我知道我能做些什么来纠正它。当我有一个弹出窗口时，我在很大程度上使用相同的设置（例如，在弹出窗口中接收来自sendurls.js的URL，然后通过执行它将它们发送到与sendurls.js非常相似的注入脚本）并且它可以工作就像一个魅力，但现在我只使用sai.js它没有（我在发送消息时不再执行background.js，因为我只想运行一次 - 因为以相同的方式反复操作DOM是多余的，无效的。）

我应该怎样做才能实现我的目标（从sai.js获取sendurls.js的网址？）

Chrome扩展程序：在注入的脚本中接收消息无法正常工作

0 个答案: