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 a '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 the 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 a weird issue with my Chrome ext. code. It has the following files (as shown above) -
- popup.js
- manifest.json
- popup.html
- background.js
The issue is that the code inside the block chrome.browserAction.onClicked.addListener(function(tab) { does not execute :(
alert('Out'); gets executed when I reload the ext., but, when I return back to the tab with URL file:///D:/Users/username/Desktop/file.html and then click the ext. icon, alert('In'); doesn't get executed.
Additionally, I read here that
Do you have default_popup in your manifest? if so the code will not work!
which has completely confused me... as if that were the case, the first alert won't execute; or maybe I am wrong. Please help me do this correctly.
