Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set value active input in active page from chrome extension

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. enter image description here 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.

like image 228
Freelancer Avatar asked Nov 29 '25 16:11

Freelancer


1 Answers

  1. 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.

  2. The correct popup script should attach a click listener to the element

  3. 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');
like image 191
wOxxOm Avatar answered Dec 02 '25 06:12

wOxxOm



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!