Text fields in Chrome Extensions?
Question
So recently I have been getting into making Chrome Extensions. I want to add a text input field when a button is clicked, like this:
manifest: ...
"browser_action":{
"default_icon": "icon.png",
"default_popup":"popup.html"
},
"background":{
"scripts": ["background.js"]
},
"permissions":["tabs"]
}
background.js:
function textfield(){
var field = document.createElement("INPUT");
field.setAttribute("type","text");
field.setAttribute("value","Id:");
document.body.appendChild(field);
}
popup.html: ...
<button onclick="textfield()"class="button"type="button">Regulations</button>
So the problem I am having is that I cannot figure out why the text field is appearing. The onclick does work, but it is not being generated for some reason. Any ideas?
2 answers
solution1
0 2017-02-16 05:21:44
You need to change the code a little bit for extension to fire click event.
document.getElementById('regButton').addEventListener('click', function () { var field = document.createElement('input'); // INPUT also works field.setAttribute('type', 'text'); field.setAttribute('name', 'text'); document.body.appendChild(field); document.body.appendChild(document.createElement("br")); });
<!DOCTYPE html> <html> <head> </head> <body> <button id="regButton" type="button">Regulations</button> </body> </html>
solution2
0 2017-02-16 05:31:01
Chrome Extension doesn't allow inline functions. You need register the handler using document.getElementById('elementId').addEventListener inside your javascript.
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.