我想将数据从 content.js 发送到 popup.js， content.js 只是获取文档标题，然后将其传递给 popup.js。
那么 popup.js 将更改 popup.html DOM。
manifest.json:
{
"browser_action": {
"default_icon": {
"64": "icons/icon64.png"
},
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content.js"
],
"run_at": "document_end"
}
],
"permissions": [
"tabs",
"activeTab",
"*://*/*"
]
}
popup.html:
<html>
<body>
<span class="info">TAB TITLE</span>
<script src="popup.js"></script>
</body>
</html>
内容.js:
console.log('CONTENT IS RUNNING')
var getTitle = function() {
return document.title
}
chrome.runtime.sendMessage(getTitle());
popup.js:
console.log('POPUP IS RUNNING')
chrome.runtime.onMessage.addListener(
function(response, sender, sendResponse) {
var title = response;
return title;
}
);
document.querySelector('.info').innerHTML = title; // error: title is not defind
在 popup.js 中，响应参数没有给出文档标题。
最佳答案
弹出窗口仅在显示时运行(并存在)。
每当加载网页时，声明的内容脚本就会运行。
这两个事件可能随时发生，因此不能保证它们同时发生。
解决方案 1:不声明内容脚本，而是手动运行
popup.js:
chrome.tabs.executeScript({code: 'document.title'}, ([title]) => { document.querySelector('.info').textContent = title; });请注意我们在这里如何使用 textContent，它是安全的，与可能导致 XSS 的 innerHTML 不同(默认情况下它会被阻止，但如果您放宽默认 CSP 则不会)。
解决方案 2:通过 chrome.tabs API 直接读取标签页标题
popup.js:
chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => { document.querySelector('.info').textContent = tab.title; });
两种解决方案的manifest.js:
{
"browser_action": {
"default_icon": {
"64": "icons/icon64.png"
},
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
注意我们只需要 "activeTab" permission因此安装时不会显示权限警告。
关于javascript - 如何将数据从content.js发送到popup.js？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53350599/