javascript - Using background.js with popup.html -
popup.js
document.addeventlistener('domcontentloaded', function () { document.body.innerhtml = '<div class="mydiv"><img src="loading.gif"/></div>'; // document.body.style.backgroundcolor = '#f5f5f5'; document.body.style.backgroundcolor = '#fafafa'; document.body.style.borderradius = '4px'; var span = document.createelement('span'); span.innerhtml = 'processing'; span.style.position = 'relative'; span.style.left = 'auto'; span.style.right = 'auto'; span.style.width = '100%'; span.style.textalign = 'center' span.style.display = 'inline-block'; span.style.fontsize = '30px'; document.queryselector('.mydiv').appendchild(span); });
manifest.json
{ "manifest_version": 2, "name": "note parser", "description": "this extension demonstrates 'browser action'.", "version": "2.0", "content_scripts": [ { "matches": [ "file:///*" ], "js": ["pie.js"] } ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "background": { "scripts": ["background.js"], "persistent": false }, "permissions": ["activetab" /*is default permission*/ ] }
popup.html
<!doctype html> <html> <head> <title>note parser</title> <style> body { min-width: 350px; } .mydiv { font-family: "segoe ui"; font-size: 12px; background-color: #fff; padding: 6px; margin: 4px; height: 250px; min-height: 50px; border-radius: 3px; border: 1px solid #e0e0e0; color: #444; } img { margin: auto auto; top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; } </style> <script src="popup.js"></script> </head> <body></body> </html>
background.js
alert('out'); chrome.browseraction.onclicked.addlistener(function(tab) { alert('in'); // no tabs or host permissions needed! console.log('turning ' + tab.url + ' red!'); chrome.tabs.executescript({ code: 'document.body.style.backgroundcolor = "red";' }); });
i'm experiencing weird issue chrome ext. code. has following files (as shown above) -
- popup.js
- manifest.json
- popup.html
- background.js
the issue code inside block chrome.browseraction.onclicked.addlistener(function(tab) {
not execute :(
alert('out');
gets executed when reload ext., but, when return tab url file:///d:/users/username/desktop/file.html , click ext. icon, alert('in');
doesn't executed.
additionally, read here
do have default_popup in manifest? if code not work!
which has confused me... if case, first alert won't execute; or maybe wrong. please me correctly.
Comments
Post a Comment