I wrote an extension for Chrome. I want when I click on button from my extension, the value 'abc' will be set into active input on active page.
Here are my codes:
1) manifest.json
{
"name": "Test",
"short_name": "Test",
"manifest_version": 2,
"version":"2.0.0.0",
"browser_action": {
"default_popup": "index.html",
"default_title": "Load EmojiSelector"
},
"background":{
"scripts":["background.js"],
"persistent": false
},
"content_scripts":[
{
"matches":["http://*/*", "https://*/*"],
"js":["content.js"]
}
]
,
"permissions": [
"activeTab"
]
}
2) index.html
<!DOCTYPE html>
<html>
<head>
<title>Test SendMessage</title>
<script src='content.js'></script>
</head>
<body>
<input id='btsend' type='button' value='Send abc to input'>
</body>
</html>
3) background.js
chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){
var act = chrome.tabs.getSelected(null, function(tab){
//How to set the value of response to active input in page????
});
});
4) content.js
onload=function(e){
var btsend = document.getElementById('btsend');
btsend.onclick = function(){
chrome.runtime.sendMessage('abc');
}
}
How can I set value for active input in active page by using DOM.
Make sure to read about the extension architecture: your popup script should be different from the content script. Actually, you don't need an unconditionally injected content script at all, use chrome.tabs.executeScript like shown in the official sample extension Page Redder.
Note: It's not possible to insert text on the default new tab page because Chrome redirects keyboard input to its built-in omnibox (address bar) which accepts only trusted (real) key presses, not the ones sent from JavaScript.
The correct popup script should attach a click listener to the element
You don't need a background page script at all for this task
manifest.json:
{
"name": "Test",
"manifest_version": 2,
"version":"2.0.0.0",
"browser_action": {
"default_popup": "popup.html",
"default_title": "Load EmojiSelector"
},
"permissions": [
"activeTab"
]
}
popup.html:
<input id='btsend' type='button' value='Send abc to input'>
<script src='popup.js'></script>
popup.js:
document.getElementById('btsend').onclick = () => {
chrome.tabs.executeScript({file: 'content.js'});
};
content.js:
document.execCommand('insertText', false, 'abc');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With