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";'   }); }); 

reloading chrome ext. in developer mode.

i'm experiencing weird issue chrome ext. code. has following files (as shown above) -

  1. popup.js
  2. manifest.json
  3. popup.html
  4. 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

Popular posts from this blog

PHPMotion implementation - URL based videos (Hosted on separate location) -

javascript - Using Windows Media Player as video fallback for video tag -

c# - Unity IoC Lifetime per HttpRequest for UserStore -