html tabs改变长宽,将HTML内容从chrome.tabs. onupdates中更改为HTML内容
3
The problem:
You are injecting background.js as a content script. (Chrome does not care what you name it, just that you put it in content_scripts's js array) So, basicaly, you can use jQuery to directly manipulate a web-pages DOM (like in your first attempt) - because content scripts can do that, but you cannot use chrome.tabs.* (like in your second attempt) - because content scripts cannot do that.
问题是:你在注射背景。作为内容脚本的js。(Chrome不关心你的名字，只是你把它放在content_scripts的js数组中)所以，basicaly，你可以使用jQuery直接操作一个网页DOM(就像你的第一次尝试一样)——因为内容脚本可以做到这一点，但是你不能使用chrome.tab。*(就像第二次尝试一样)——因为内容脚本不能做到这一点。
The solution: Since you cannot manipulate a web-pages DOM from a background page, you have to do it through a content script:
解决方案:由于无法从后台页面操作web页面DOM，所以必须通过内容脚本:
Define background.js as a background page (or better yet
定义背景。js作为后台页面(或更好的事件页面)。
Define a new file (e.g. content.js as your content script).
定义一个新文件(例如内容)。作为你的内容脚本)。
From your chrome.tabs.onUpdated listener (in the background page), send a message to the corresponding tab's content script, using
从你的chrome.tabs。onupdate listener(在后台页面)，使用chrome.tabs.sendMessage向相应的选项卡的内容脚本发送一条消息。
In your content script, listen for messages from the background page (using $("body").before("");
在内容脚本中，从背景页面(使用chrome.runtime.onMessage)侦听消息，然后执行$(“body”)。
(Note: There plenty of alternative approaches and you should pick one that better fits your specific requirements.)
(注意:有很多可供选择的方法，您应该选择一种更适合您的特定需求的方法。)
For the sake of completeness, below is a code of a sample extension, based on what I described above:
为了完整性起见，下面是基于我上面描述的示例扩展代码:
In manifest.json:
在manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["./bg/background.js"]
},
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["./fg/content.js"],
"run_at": "document_start",
}],
"permissions": ["tabs"]
}
In background.js:
在background.js:
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
console.log("One of my tabs updated: ", info);
if (info.url) { //
// (Also, if a tab is refreshed, the URL is not changed,
// so you will never get and `info` object with a `url` field)
console.log("...pretending to make an AJAX request...");
var pageURL = info.url;
setTimeout(function() {
// ...let's simulate an AJAX request...
// ...now let's pretend out data arrived...
chrome.tabs.sendMessage(tabId, {
cmd: "doYourStuff",
kind: "fancy"
});
console.log("Message sent !");
}, 2000);
}
});
In content.js:
在content.js:
chrome.runtime.onMessage.addListener(function(msg) {
console.log("Someone sent us this: ", msg);
if (msg.cmd && (msg.cmd == "doYourStuff")) {
alert("Watch me doing " + kind + " stuff !");
}
});