在 chrome 扩展的活动页面中设置值活动输入答案

【问题标题】：Set value active input in active page from chrome extension在 chrome 扩展的活动页面中设置值活动输入
【发布时间】：2017-03-15 15:40:30
【问题描述】：

我为 Chrome 编写了一个扩展程序。我希望当我单击扩展程序中的按钮时，值“abc”将设置为活动页面上的活动输入。这是我的代码： 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) 索引.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) 背景.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) 内容.js

    onload=function(e){
    var btsend = document.getElementById('btsend');
    btsend.onclick = function(){
        chrome.runtime.sendMessage('abc');  
    }
}

如何使用 DOM 为活动页面中的活动输入设置值。

【问题讨论】：

假设您关注 wOxxOm 的回答，您的下一个问题可能会被：Pass a parameter to a content script injected using chrome.tabs.executeScript()
这与我的话题有关，但不适合。我想在活动页面中设置 DOM 的值。变量只有设定值。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

请务必阅读extension architecture：您的弹出脚本应该与内容脚本不同。实际上，您根本不需要无条件注入的内容脚本，请使用 chrome.tabs.executeScript ，如官方示例扩展 Page Redder 中所示。

注意：无法在默认的新标签页上插入文本，因为 Chrome 会将键盘输入重定向到其内置的多功能框（地址栏），该多功能框仅接受受信任的（真实）按键，而不接受从 JavaScript 发送的按键。
正确的弹出脚本应将click 侦听器附加到元素
此任务根本不需要后台页面脚本

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

【讨论】：

内容脚本没有告诉我将文本插入到哪里？？？？我想在活动打开的页面上插入活动输入！！！！！
没有。与您的代码以及任何上述用户无关。所以我不选择确切的答案
这意味着你的代码在这种情况下没有帮助我:(
我试过了，没有错误，但是不行！！！ google.com 的输入框中没有插入任何文本
@HTCom，它有效。代码是正确的。我刚刚在 google.com 上再次尝试过这是扩展 zip puu.sh/uLlYH/1805bc9e8a.zip 如果它对您不起作用，那么您的浏览器可能有问题（例如您使用的是不支持 ES6 箭头的旧版本语法）。