Chrome擴展程序-觸發器不起作用

Question

我嘗試創建簡單的Chrome擴展程序，在彈出窗口中單擊按鈕后，我需要將函數setInput（）發送到頁面，函數更改值，並且如果要在Chrome控制台中使用此函數，則需要使用Trigger（'keyup'）-觸發器工作。 但是，如果我在彈出窗口中單擊后發送此功能-觸發器不起作用（

Chrome擴展程序-觸發器不起作用

控制台-觸發工作

popup.html

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

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

- 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

謝謝大家的幫助，我找到了答案，刪除了jQuery，並創建了事件“ keyup”

舊：

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

新：

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

Answer 2

如果已附加此事件處理程序btn.addEventListener('click', function() {請在btn.addEventListener('click', function() {之后btn.addEventListener('click', function() { debugger 。

第二件事 -您可能希望將初始化代碼包裝到setTimeout調用中，假設延遲為100ms，以檢查您正在處理的頁面是否不僅在某些生成此HTML的框架上工作，而且在DOMContentLoaded之后完成。 這意味着基本上將所有東西都包裹在內

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

與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