如何在点击网页按钮时打开扩展

huangapple go评论83阅读模式
英文:

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"
  }

huangapple
  • 本文由 发表于 2023年5月11日 18:15:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/76226525.html