Browser action radio button click
Question
My problem is the following: I was able to attach a listener to a browser_action radio button in a chrome extension and it can pop an alert window if I want it to do so BUT
My intention is to hide() / show() a button on the page that I inserted into the DOM with this same extension.
My question is what am I missing? How can I make it work?
Below you can find all the code snippets I'm using.
manifest.json
{"manifest_version": 2,
"name": "Button Summoner",
"description": "This extension shows a pop-up window where you can summon a button",
"version": "0.1",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["jquery_min.js","summoner.js"]
}]}
summoner.js
jQuery(document).ready(function(){
var button = $('<button id="cc_lookUp_button >Button</button>');
button.hide();
$(button).insertAfter("body");
});
popup.html
<!doctype html>
<html>
<head>
<script src="jquery_min.js"></script>
<script src="popup.js"></script>
</head>
<body>
Enable/Disable Extension<br/>
<input type="radio" id="radioEnable" name="enable" value="enable">Enable</br>
<input type="radio" id="radioDisable" name="enable" value="disable">Disable</br></br>
popup.js
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#radioEnable').addEventListener('change', changeHandler);
});
function changeHandler(){
if(radioEnable.checked){
alert("BYOB"); //this works like a charm
$('#cc_lookUp_button').show(); //this is not
}
else{
$('#cc_lookUp_button').hide(); // neither this
}
}
There is no error message it just simply doesn't work.
1 answers
solution1
1 ACCPTED 2015-11-23 16:55:28
I was able to resolve the problem, so I think it is useful to share it with the community.
You can use different solution if it is more suitable for you, for me separating the executable codes into different files seemed an organized solution.
The other one is to write a "code : 'your code comes here'" part instead of including another .js file in popup.js.
manifest.json
{"manifest_version": 2,
"name": "Button Summoner",
"description": "This extension shows a pop-up window where you can summon a button",
"version": "0.1",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["jquery_min.js","button_show.js","button_hide.js","crafty_postcode.class.js","cc_lookup_summoner.js"]
}]}
popup.js
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#radioEnable').addEventListener('change', changeHandler);
});
function changeHandler(){
if(radioEnable.checked){
chrome.tabs.executeScript({
file : 'button_show.js'
});
}
else{
chrome.tabs.executeScript({
file : 'button_hide.js'
});
}
button_hide.js
$('#cc_lookUp_button').hide();
button_show.js
$('#cc_lookUp_button').show();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.