Question

我尝试创建简单的Chrome扩展程序，在弹出单击按钮后，我需要发送功能setInput（）到页面，功能更改值，我需要使用触发器（'keyup'），如果我尝试在Chrome中使用此功能控制台 - 触发工作。但如果我在点击弹出后发送此功能 - 触发器不起作用（

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”

旧：

<div class="product-markers">
  <div class="product-marker energy">
    <span class="wrapper">
      <span class="inner">A++</span>
      <span class="arrow"></span>
    </span>
  </div>
</div>

新：

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

Answer 2

请在debugger之后添加btn.addEventListener('click', function() {，看看发生了什么。如果附加了此事件处理程序。

第二件事 - 您可能希望将初始化代码打包到setTimeout来电，让我们说100毫秒的延迟，以检查您正在处理的这个页面是否不是仅使用生成此HTML的某个框架，这是在DOMContentLoaded之后完成的。这意味着基本上将所有内容包装在

中

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

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

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

2 个答案: