Chrome扩展程序-触发器不起作用

Question

i try create simple Chrome Extension, after click button in pop-up, i need send function setInput() to page, function change value and i need use trigger('keyup'), if i try use this function in Chrome Console - trigger work. 我尝试创建简单的Chrome扩展程序，在弹出窗口中单击按钮后，我需要将函数setInput（）发送到页面，函数更改值，并且如果要在Chrome控制台中使用此函数，则需要使用Trigger（'keyup'）-触发器工作。 But if i send this function after click in pop-up - trigger not work( 但是，如果我在弹出窗口中单击后发送此功能-触发器不起作用（

Chrome Extension - Trigger not Work Chrome扩展程序-触发器不起作用

Console - Trigger Work 控制台-触发工作

popup.html popup.html

<head>
  <script src="popup.js"></script>
</head>
<body>
    <div class="btn">Click</div>
</body>

popup.js popup.js

function sendMessage() {
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
   });
}

function onWindowLoad() {
    chrome.tabs.executeScript(null, { file: "PageReader.js" });
}

document.addEventListener("DOMContentLoaded", function() {
    var btn = document.querySelector('.btn');
    btn.addEventListener('click', function() {

        sendMessage();

    });
});

window.onload = onWindowLoad;

PageReader.js PageReader.js

- in file top i include Jquery

    function setInput() {
        var input = $('.text input');
        input.val('1111').trigger('keyup');
    }

    chrome.runtime.onMessage.addListener(
        function(request, sender, sendResponse) {
            if( request.message === "start" ) {
                setInput();
            }
        }
    );

Answer 1

thanks all for help, i find answer, i delete jQuery, and create event "keyup" 谢谢大家的帮助，我找到了答案，删除了jQuery，并创建了事件“ keyup”

Old: 旧：

var input = $('.text input');
input.val('1111').trigger('keyup');

New: 新：

var evt = document.createEvent('KeyboardEvent');
evt.initEvent('keyup', true, true);
var input = document.querySelector('.text input');
input.value = '1111';
input.dispatchEvent(evt);

Answer 2

Please add debugger after btn.addEventListener('click', function() { too see what is going on. if this event handler is attached. 如果已附加此事件处理程序btn.addEventListener('click', function() {请在btn.addEventListener('click', function() {之后btn.addEventListener('click', function() { debugger 。

Second thing - you may want to wrap you initialisation code into setTimeout call with let's say 100ms of delay, to check if this page you are dealing with is not only working with some framework that generates this HTML and this is done after DOMContentLoaded . 第二件事 -您可能希望将初始化代码包装到setTimeout调用中，假设延迟为100ms，以检查您正在处理的页面是否不仅在某些生成此HTML的框架上工作，而且在DOMContentLoaded之后完成。 This means basically wrap everything inside 这意味着基本上将所有东西都包裹在内

document.addEventListener("DOMContentLoaded", function() {

with setTimeout(function() {/*everything inside goes here*/}, 100) 与setTimeout(function() {/*everything inside goes here*/}, 100)

Chrome扩展程序-触发器不起作用

问题描述

2 个解决方案

解决方案1
1 2018-01-23 10:56:48

解决方案2
0 2018-01-23 07:36:57

Chrome扩展程序-触发器不起作用

问题描述

2 个解决方案

解决方案1 1 2018-01-23 10:56:48

解决方案2 0 2018-01-23 07:36:57

解决方案1
1 2018-01-23 10:56:48

解决方案2
0 2018-01-23 07:36:57