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/"
]
}
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>
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_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
window.onload=function(){
console.log("page load!");
}
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.
This is how I do:
manifest.json
...
"background": {
"scripts": [
"assets/js/background.js"
],
"persistent": false
},
....
background.js
function openOrFocusOptionsPage() {
var optionsUrl = chrome.extension.getURL('popup.html');
chrome.tabs.query({}, function(extensionTabs) {
var found = false;
for(var i=0; i < extensionTabs.length; i++) {
if(optionsUrl == extensionTabs[i].url) {
found = true;
chrome.tabs.update(extensionTabs[i].id, {"selected": true});
}
}
if(found == false) {
chrome.tabs.create({url: "popup.html"});
}
});
}
chrome.extension.onConnect.addListener(function(port) {
var tab = port.sender.tab;
port.onMessage.addListener(function(info) {
var max_length = 1024;
if(info.selection.length > max_length)
info.selection = info.selection.substring(0, max_length);
openOrFocusOptionsPage();
});
});
chrome.browserAction.onClicked.addListener(function(tab) {
openOrFocusOptionsPage();
});