英文:
how to open extension when web page button is clicked
问题
我想在外部网页按钮被点击时打开Chrome扩展。当我点击网页按钮时,扩展会在不点击浏览器扩展按钮的情况下打开。我进行了深入的搜索,但没有找到任何解决方法。如果有人能帮助我找到解决方案吗?
英文:
I want to open the chrome extension when external web page button is clicked . when i click the web page button then extension is opened without clicking the browser extension button. I searched very deeply but could not find any thing.
If any one can help to find my solution?
答案1
得分: 1
你可以将内容脚本注入到网页中,监听按钮的点击事件。
按钮被点击后,内容脚本可以使用chrome.runtime.sendMessage
API向扩展的后台脚本发送消息:
// content.js
document.getElementById('button').addEventListener('click', function() {
// 向后台脚本发送消息以打开扩展
chrome.runtime.sendMessage({action: 'openExtension'});
});
后台脚本可以通过使用chrome.tabs.create
和扩展的URL来响应,打开扩展:
// background.js
// 监听来自内容脚本的消息
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
if (message.action === 'openExtension') {
chrome.browserAction.setPopup({ popup: 'popup.html' });
chrome.browserAction.getPopup({}, function (popupUrl) {
if (popupUrl) {
chrome.windows.create({
url: popupUrl,
type: 'popup',
width: 400,
height: 600,
});
}
});
}
});
在清单文件中添加这些脚本,以及activeTab
权限:
"permissions": [
"activeTab",
"runtime"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"matches": ["https://...."],
"js": ["content.js"]
}],
"browser_action": {
"default_popup": "popup.html"
}
英文:
You can inject a content script into the webpage that listens for a click event on the button.
Once the button is clicked, the content script can send a message to the background script of the extension using the chrome.runtime.sendMessage
API
// content.js
document.getElementById('button').addEventListener('click', function() {
// Send a message to the background script to open the extension
chrome.runtime.sendMessage({action: 'openExtension'});
});
The background script can then respond by opening the extension using chrome.tabs.create
with the extension's URL
// background.js
// Listen for messages from the content script
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
if (message.action === 'openExtension') {
chrome.browserAction.setPopup({ popup: 'popup.html' });
chrome.browserAction.getPopup({}, function (popupUrl) {
if (popupUrl) {
chrome.windows.create({
url: popupUrl,
type: 'popup',
width: 400,
height: 600,
});
}
});
}
});
Add these scripts as well as activeTab
permission to your manifest file
"permissions": [
"activeTab",
"runtime"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"matches": ["https://...."],
"js": ["content.js"]
}],
"browser_action": {
"default_popup": "popup.html"
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论