使用扩展弹出窗口中的按钮更改 DOM 的 Chrome 扩展
Posted
技术标签:
【中文标题】使用扩展弹出窗口中的按钮更改 DOM 的 Chrome 扩展【英文标题】：Chrome extension to change DOM with a button in extension popup 【发布时间】：2016-11-28 09:43:21 【问题描述】：我对 chrome 扩展开发完全陌生。 单击扩展弹出窗口中的按钮时，我正在尝试更改 DOM（将数据附加到活动网页）。这怎么可能。
清单文件
"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文件是
<!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 代码，它将一些数据附加到活动网页。
谢谢。
【问题讨论】：
Chrome Extension - Message Passing from Popup to Content Script的可能重复 @HibaraAi 如果我的问题以这样的重复而结束，我不知道该怎么办。这只是解决方案的一小部分。 感谢您提供的链接。它有助于获得一个想法，但现在我希望在 popup.html 中合并一个按钮并添加一个侦听器，该侦听器将更改活动页面的 DOM。我正在寻找这样的东西，link 【参考方案1】：使用Programmatic injection。您可以在 popup.js 中注册事件侦听器并调用 chrome.tabs.executeScript 将一些 js 代码/文件注入当前活动选项卡。这需要主机权限。
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' );
);
);
使用Message Passing。您可以在 popup.js 中调用 chrome.tabs.sendMessage 并通过 content.js 中的 chrome.runtime.onMessage 收听。
popup.js
// WAY 2 (Replace WAY1 with following line)
chrome.tabs.sendMessage(activeTabs[0].id, action: 'executeCode' );
content.js
chrome.runtime.onMessage.addListener(function(request)
if(request.action === 'executeCode')
// YOUR CODE HERE
);
使用Storage。您可以在 popup.js 中调用 chrome.storage.local.set 并通过 chrome.storage.onChanged 监听 content.js 中的存储变化。
popup.js
// WAY 3 (Replace WAY1 with following line)
chrome.storage.local.set( action: 'executeCode' );
content.js
chrome.storage.onChanged.addListener(function(changes)
var action = changes['action'];
if(action.newValue === 'executeCode')
// YOUR CODE HERE
);
【讨论】：
谢谢灰原。我检查了一些文件。但我没有得到正确的想法，但这有帮助以上是关于使用扩展弹出窗口中的按钮更改 DOM 的 Chrome 扩展的主要内容，如果未能解决你的问题，请参考以下文章