Set value active input in active page from chrome extension

Question

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.

Assuming you follow wOxxOm's answer, your next issue will probably be covered by: [Pass a parameter to a content script injected using chrome.tabs.executeScript()](http://stackoverflow.com/q/17567624) — Makyen, Mar 15 '17 at 17:34
This related to my topic, but not suitable. I want to set the value for DOM in active page. And there is just only set value for variable. — Freelancer, Mar 15 '17 at 23:59

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 15 '17 at 16:01

wOxxOm

65,848
11
132
136

The content script didn't tell me that insert text to where???? I want to insert in to active input on active opened page!!!!! – Freelancer Mar 15 '17 at 23:42
NO. Not relate to your codes, and of any above users. So I don't choose the exact answer – Freelancer Mar 16 '17 at 01:51
That's mean your code didn't help me in this situation :( – Freelancer Mar 16 '17 at 09:40
I tried, no error, but no work!!!! No text was inserted into Input box of google.com – Freelancer Mar 16 '17 at 10:32
@HTCom, It works. The code is correct. I've just tried it again on https://www.google.com/ Here's the extension zip https://puu.sh/uLlYH/1805bc9e8a.zip If it doesn't work for you then there's something wrong with your browser maybe (for example you're using ancient version that doesn't support ES6 arrow syntax). – wOxxOm Mar 16 '17 at 10:39
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. – wOxxOm Mar 16 '17 at 11:46
I did it successfully. Try this extension https://chrome.google.com/webstore/detail/emoji-keyboard-from-emoji/papnjoffofhpnddonlobhlhjijjgojmo – Freelancer Mar 16 '17 at 16:29
Good. I'm glad. – wOxxOm Mar 16 '17 at 16:50

Set value active input in active page from chrome extension

1 Answers1

Linked