在页面加载时在chrome扩展中运行js脚本 [英] run js script in chrome extension on page load
问题描述
我需要构建一个操作dom
的chrome扩展我正在遵循一些教程，现在
我有这个manifest.json：
I need to build a chrome extension that manipulates dom I am following some tutorial and now I have this manifest.json:
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
]
}
这是我的popup.html：
This is my popup.html:
<!doctype html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
<script src="popup.js"></script>
<script type="text/javascript">console.log('attempt #0 to console log something');</script>
</head>
<body>
<div id="status"></div>
<img id="image-result" hidden>
</body>
</html>
这是我的popup.js：
And this is my popup.js:
document.addEventListener('DOMContentLoaded', function() {
console.log('attempt #3');
});
chrome.tabs.onUpdated.addListener(
function ( tabId, changeInfo, tab )
{
if ( changeInfo.status === "complete" )
{
chrome.tabs.executeScript({ code: "console.log('attempt #4');" }, function() {
console.log("console.log(attempt #5)");
});
}
});
正如你所看到的，我尝试了各种方法来控制页面加载后的日志记录，但没有一个工作
我该怎么办？
As you can see I tried various ways to console log something after page loaded but none of them work what do I do?
推荐答案
所以我认为简单的解决方案就是创建一个内容脚本并在那里等到页面加载：
So I think that the simple solution is just to create a content script and there to wait until the page is load :
manifest.json
manifest.json
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"content_scripts": [
{
//Set your address you want the extension will work in mataches!!!
"matches": ["http://mail.google.com/*", "https://mail.google.com/*"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
content.js
content.js
window.onload=function(){
console.log("page load!");
}
您还可以使用background.js和内容页面之间的消息传递检查选项卡是否已加载，但对于您的情况，我认为这已经足够了。
You could also use with message passing between background.js and your content page and to check that tab is loaded but for your case I think it's enough.
这篇关于在页面加载时在chrome扩展中运行js脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
