Menu
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?
202
Once you have added your custom code, simply make sure that the “enable” checkbox is ticked (top/right) and then click “Save & Run”. That's it! Now every time you visit this particular website again, this code will automatically run.
This extension allows you to write, save, and execute javascript into web pages. You can save scripts to be run globally (on any page), on a specific domain, on a specific page, or via a "URL contains" string.
Chrome extension doesn't allow its native socket connection due to security issues. But we can achieve this via JavaScript socket connection. On the server side, we have used Node JS. The following is the architecture of Node JS, Chrome extension, and Socket.io integration.
Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.
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.
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
