在Chrome扩展程序的活动页面中设置活动输​​入值 [英] Set value active input in active page from chrome extension

查看:106
本文介绍了在Chrome扩展程序的活动页面中设置活动输​​入值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我为Chrome编写了一个扩展。我希望当我点击我的扩展中的按钮时,'abc'值将被设置为活动页面上的活动输入。
:您的弹出式脚本应该与内容脚本不同。实际上,您根本不需要无条件注入的内容脚本,请使用 chrome.tabs。 executeScript ,如官方示例扩展 Page Redder 所示。



注意:由于Chrome会将键盘输入重定向到内置多功能框(地址栏),因此Chrome只能接受可信任(真实)按键,而不是从JavaScript发送的。 正确的弹出脚本应附加点击侦听器元素

  • 您完全不需要后台页面脚本来完成此任务

  • manifest.json:

      {
    name:Test,
    manifest_version:2,
    version:2.0.0.0,
    browser_action:{
    default_popup:popup.html,
    default_title:加载EmojiSelector
    },
    权限:[
    activeTab
    ]

    popup.html:

     < input id ='btsend'type ='button'value ='发送abc到输入'> 
    < script src ='popup.js'>< / script>

    popup.js:

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

    content.js:

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


    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.

    解决方案

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

    这篇关于在Chrome扩展程序的活动页面中设置活动输​​入值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆