Chrome 扩展:监听文本选择并发送至后台
根据你的需求,我将修改代码以监听用户的文本选择操作,并将所选内容发送给后台。
首先,更新清单文件(manifest.json)中的代码如下:
{
"manifest_version": 3,
"name": "Dropdown Select",
"version": "1.0",
"permissions": [
"activeTab"
],
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
然后,更新background.js文件中的代码如下:
chrome.runtime.onInstalled.addListener(function() {
chrome.action.onClicked.addListener(handleClick);
});
function handleClick(tab) {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: injectHTML
});
}
function injectHTML() {
document.addEventListener('selectionchange', function() {
var selectedText = document.getSelection().toString();
chrome.runtime.sendMessage({ action: 'selectedText', text: selectedText });
});
}
在上述代码中,我们使用chrome.action.onClicked事件监听用户点击插件图标的动作,并调用handleClick函数。在handleClick函数中,我们执行executeScript方法来注入HTML,并在注入的HTML中监听selectionchange事件。每当用户选择文本时,我们获取所选内容并通过chrome.runtime.sendMessage方法将其发送给后台。
最后,我们需要更新content.js文件中的代码如下:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action === 'selectedText') {
console.log('Selected Text:', request.text);
// 在这里进行你想要执行的操作,比如发送给后台处理等
}
});
在上述代码中,我们使用chrome.runtime.onMessage事件监听来自background.js发送的消息,并根据消息中的内容执行相应的操作。在这个例子中,我们只是简单地将所选内容打印到控制台,你可以在这里进行你自己的操作,比如将所选内容发送给后台进行处理。
请记住,在这个示例中,我们只展示了如何监听文本选择并将其发送给后台。实际应用中,你可以根据自己的需求进一步进行处理和操作。希望这次能满足你的需求!如有任何问题,请随时提问。
原文地址: https://www.cveoy.top/t/topic/TuL 著作权归作者所有。请勿转载和采集!