javascript - 在 chrome 扩展的事件页面中设置值事件输入

标签 javascript google-chrome google-chrome-extension

我为 Chrome 编写了一个扩展程序。我希望当我单击扩展程序中的按钮时,值“abc”将被设置为事件页面上的事件输入。 enter image description here 这是我的代码: 1) list .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) 背景.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');  
    }
}

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

最佳答案

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

    注意:无法在默认的新标签页上插入文本,因为 Chrome 会将键盘输入重定向到其内置的多功能框(地址栏),它只接受受信任的(真实的)按键,而不接受从 JavaScript 发送的按键。

  2. 正确的弹出脚本应该给元素附加一个click监听器

  3. 对于此任务,您根本不需要后台页面脚本

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

弹出.js:

document.getElementById('btsend').onclick = () => {
    chrome.tabs.executeScript({file: 'content.js'});
};

content.js:

document.execCommand('insertText', false, 'abc');

关于javascript - 在 chrome 扩展的事件页面中设置值事件输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42814403/

相关文章:

css - Chrome 自动刷新 css/less 更改

javascript - 当 onsubmit 应该返回 false 时表单正在向服务器发送数据

javascript - console.timeEnd ("start")不工作

google-chrome - Ember App无法在Chrome中播放声音

html - 背景附件 :fixed; 在 chrome 上出现奇怪的背景渲染

javascript - Chrome 不允许我安装扩展程序

javascript - D3 General Update Pattern transitions of circles/text inside g 元素

javascript - Django 管理员 : Pre-populating values from POST or GET?

javascript - 如何一次处理 RxJS 流 n 个项目,并在完成一个项目后,再次自动填充回 n 个?

javascript - 如何将变量传递到全局范围