[英]Chrome extension: create tab then inject content script into it
收到来自内容脚本的消息后,我想创建一个新选项卡并填充它动态打开的页面(现在我只是试图将新创建的页面变为红色)。
eventPage.js:
// ... code that injects another content script, works fine
// Problem code...
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse)
{
chrome.tabs.create({url: chrome.extension.getURL("blankpage.html")},
turnTabRed);
});
function turnTabRed(tab)
{
chrome.tabs.executeScript(
tab.id,
{code: 'document.body.style.backgroundColor="red"'}
);
}
这会成功创建一个新选项卡并加载blankpage.html
(这只是一个带有一些文本的HTML页面)很好,但无法将背景颜色绘制为红色。 在各个地方插入console.log()
语句并在调试器中turnTabRed
,我已经确定正在调用tab.id
, tab.id
确实是新创建的选项卡的ID,如果我调用document.body.style.backgroundColor="red"
从控制台,新选项卡的背景变为红色。 我注意到,如果我加入
(*)
chrome.tabs.query(
{}, function (tabArr) { for (var i = 0; tabArr[i]; i++)
console.log(tabArr[i].title); });
进入turnTabRed
的主体新标签的标题将不会打印到控制台,这表明脚本被过早注入,所以我尝试使用setTimeout
延迟注入,当失败时,我试着听取状态 -完成活动:
function turnTabRed(tab)
{
chrome.tabs.onUpdated.addListener(
function(tabUpdatedId, changeInfo, tabUpdated)
{
if (tabUpdatedId == tab.id && changeInfo.status &&
changeInfo.status == 'complete')
chrome.tabs.executeScript(
tabUpdatedId,
{code: 'document.body.style.backgroundColor="red"'});
});
}
这也失败了。 在使用setTimeout
等待之后调用(*)确实打印了新选项卡的标题以及所有其他标题。
怎么了? 如何创建新选项卡,加载HTML页面然后将其背景变为红色?
问题是你不能将脚本注入chrome-extension://*
页面(你的blankpage.html
是)。
例如,改变
{url: chrome.extension.getURL("blankpage.html")}
至
{url: "http://www.google.com"}
在原始代码块中,它会将背景更改为红色。 据我所知,没有办法注入chrome-extension://*
页面(我认为这是因为它是一个巨大的安全问题)。 我不确定你的扩展程序试图做什么,但注入“实时”页面应该可以工作......也许你可以创建一些API,以便在chrome.runtime.onMessage时在你的服务器上生成一个新的“blankpage” chrome.runtime.onMessage.addListener
会激活吗?
编辑
因此,您无法将内容注入chrome-extension://*
页面,但您可以将消息传递给它们,并在这些新页面中使用chrome API的一些子集,如下所述。 因此,使用消息传递,您将能够完全按照自己的意愿(修改新页面),尽管是以迂回的方式。 这是一个非常简单的概念证明,对我有用:
eventPage.js:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse)
{
chrome.tabs.create({url: chrome.extension.getURL("blankpage.html")}, turnTabRed);
});
function turnTabRed(tab)
{
chrome.tabs.sendMessage(tab.id, {"action" : "setBackground"});
}
blankpage.js:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(request.action == "setBackground") document.body.style.background = "red";
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.