Chrome扩展程序可通过扩展程序弹出窗口中的按钮更改DOM [英] Chrome extension to change DOM with a button in extension popup
问题描述
我对chrome扩展程序开发完全陌生.单击扩展弹出窗口中的按钮时，我试图更改DOM(将数据追加到活动网页).这怎么可能.
i am completely new to chrome extension development. I am trying to change the DOM (append data to active webpage) when clicked on a button in the extension popup. How is this possible.
清单文件
{
"manifest_version": 2,
"name": "test 2",
"description": "test ext 2",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["jquery.min.js", "main.js"]
}
],
"permissions": [
"activeTab"
]
}
假设popup.html文件是否为
suppose if the popup.html file is
<!doctype html>
<html>
<head>
<title>test extension 2</title>
<script src="popup.js"></script>
</head>
<body>
<a id="button">button</a>
</body>
</html>
当我单击#button时，我想在main.js文件中执行一些jquery代码，该代码会将一些数据附加到活动网页上.
and when i click on #button, i want to execute some jquery code in main.js file which will append some data to the active webpage.
谢谢.
推荐答案
-
使用程序注入.您可以在popup.js中注册事件侦听器，然后调用
chrome.tabs.executeScript将一些js代码/文件注入到当前活动标签页中.这需要主机权限.
Use Programmatic injection. You could register event listener in popup.js and call
chrome.tabs.executeScriptto inject some js code/file to current active tab. This requires host permissions.
popup.js
document.getElementById('button').addEventListener('click', function() {
chrome.tabs.query({ active: true, currentWindow: true}, function(activeTabs) {
// WAY 1
chrome.tabs.executeScript(activeTabs[0].id, { code: 'YOUR CODE HERE' });
});
});
使用消息传递.您可以在popup.js中调用 chrome.tabs.sendMessage ，然后通过content.js中的 chrome.runtime.onMessage 收听.
Use Message Passing. You could call chrome.tabs.sendMessage in popup.js and listen to that via chrome.runtime.onMessage in content.js.
popup.js
// WAY 2 (Replace WAY1 with following line)
chrome.tabs.sendMessage(activeTabs[0].id, { action: 'executeCode' });
content.js
content.js
chrome.runtime.onMessage.addListener(function(request) {
if(request.action === 'executeCode') {
// YOUR CODE HERE
}
});
使用存储.您可以在popup.js中调用 chrome.storage.local.set ，并通过 chrome.storage.onChanged 监听content.js中的存储更改.
Use Storage. You could call chrome.storage.local.set in popup.js and listen to storage change in content.js via chrome.storage.onChanged.
popup.js
// WAY 3 (Replace WAY1 with following line)
chrome.storage.local.set({ action: 'executeCode' });
content.js
content.js
chrome.storage.onChanged.addListener(function(changes) {
var action = changes['action'];
if(action.newValue === 'executeCode') {
// YOUR CODE HERE
}
});
这篇关于Chrome扩展程序可通过扩展程序弹出窗口中的按钮更改DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
