Question

我有一个简单的问题我有这3个文件 popup.html：

<script>
    function buttonClicked(button) 
    {
        chrome.extension.sendRequest({command:button.id});
    }
</script>
    <input style="width:100%" type="button" value="Click me" id="click" onclick="buttonClicked(this)"/><br/>

background.html：

<script>
    function processRequest(request, sender, sendResponse) 
    {
        alert('hi');
        sendResponse({});
    }
    chrome.extension.onRequest.addListener(processRequest);
</script>

和contentscript.js

s = document.getElementsByClassName('st');
if (s[0].innerText != '') { 
st = new Array(); 
for (i = 0;i<s.length;i++) {
    st[i] = s[i].innerText;
}
chrome.extension.sendMessage({"message" : st}, function(response) {});
}

我想在每次点击弹出页面中的按钮时触发内容脚本因为某种原因，脚本中的脚本dosint既没有工作也没有back.html，也没有在popup.html上工作？

谢谢

Answer 1

我试图解释解决方案以及为什么要在评论中使用它三次。由于您不理解它，我将再次通过引用您的代码来解释它：

弹出

将内联脚本移至外部文件，例如popup.js。
删除内联事件侦听器，并将其移至popup.js。

`popup.js`

function buttonClicked(button) {
    chrome.extension.sendRequest({command: button.id});
}
document.getElementById('click').addEventListener('click', function() {
    buttonClicked(this);
});

`popup.html`

<script src="popup.js"></script>
<input style="width:100%" type="button" value="Click me" id="click"><br>

如果您测试以前的代码，您会发现它不起作用。那是因为popup.js的内容在按钮之前执行（在 <script src>之后发生。）这可以通过两种方式解决（使用任一方法，但不能同时使用两种方法））：

建议：将<script src="popup.js"></script>放在</body>的结束popup.html标记之前。然后，您确定在执行脚本时所有元素都存在。

替代方法：在DOMContentLoaded事件中包装事件侦听器：

document.addEventListener('DOMContentLoaded', function() { document.getElementByUd('click').addEventListener( ... ); });

背景页面。

有关可用选项的更全面说明，请参阅this answer的中间部分。

修改清单文件，使用"background": {"scripts": ["background.js"]}。

将background.html重命名为background.js，然后从文件中删除<script>和</script>。

我怎样才能启动内容

1 个答案:

弹出

`popup.js`

`popup.html`

背景页面。