[英]Chrome extension - Execute content script for specific site url
At the moment I'm testing this code.目前我正在测试这段代码。 My intention is to scrape some data using a content script
我的意图是使用内容脚本抓取一些数据
This is what I have in background file这就是我在后台文件中的内容
chrome.action.onClicked.addListener( (tab) => {
// chrome.scripting.executeScript({
// target: {tabId: tab.id},
// files: ['content.js']
// })
console.log('Requesting tab: \n', tab)
chrome.windows.create({
type: 'popup',
height: 300,
width: 200,
url: chrome.runtime.getURL('popup.html')
})
})
This is what I have in my content script这就是我的内容脚本中的内容
console.info('chrome-ext template-vue-js content script')
const DOMnodes = document.querySelectorAll('article')
console.log(`Ecco le informazioni sui prezzi per Sole365`)
console.log('\n')
let details = []
DOMnodes.forEach( (node) => {
// Loop nodi prodotto
details.push(node.dataset)
console.log(`----\n`)
console.log(`Nome prodotto: ${node.dataset.productName}`)
console.log(`Descrizione breve: ${node.children[2].children[1].childNodes[1].childNodes[0].innerText}`)
// price
console.log(`Prezzo: ${node.childNodes[2].childNodes[1].childNodes[2].childNodes[0].innerText}`)
//console.log(``)
//descriz. breve
//node.children[2].children[1].childNodes[1].childNodes[0].innerText
})
console.log(details)
The script isn't executed when the website I set in manifest match.当我在清单中设置的网站匹配时,脚本不会执行。 here is the dev version
这是开发版本
{
"name": "create-chrome-ext",
"description": "Extract data",
"version": "1.0.0",
"manifest_version": 3,
"icons": {
"16": "img/logo-16.png",
"32": "img/logo-34.png",
"48": "img/logo-48.png",
"128": "img/logo-128.png"
},
"action": {
"default_icon": "img/logo-48.png"
},
"options_page": "options.html",
"background": {
"service_worker": "service-worker-loader.js",
"type": "module"
},
"host_permissions": [
"https://www.example.com/mypath/*/*"
],
"content_scripts": [
{
"js": [
"assets/content-script.js"
],
"matches": [
"https://www.example.com/mypath/*/*"
]
}
],
"web_accessible_resources": [
{
"matches": [],
"resources": [
"img/logo-16.png",
"img/logo-34.png",
"img/logo-48.png",
"img/logo-128.png"
],
"use_dynamic_url": false
},
{
"matches": [
"<all_urls>"
],
"resources": [
"**/*",
"*"
],
"use_dynamic_url": true
}
],
"permissions": [
"activeTab",
"tabs",
"alarms"
]
}
Any idea of why?知道为什么吗? My idea is to call the script when the icon is clicked and open a popup to get the resulting extracted data to use in vue frontent
我的想法是在单击图标时调用脚本并打开一个弹出窗口以获取生成的提取数据以在 vue frontent 中使用
When you reload the extension you also need to reinject the content script(s) .当您重新加载扩展时,您还需要重新注入内容脚本。
If the site is a modern SPA (Single Page Application) it uses fake navigation via history.pushState, so the page stays the same and the content script doesn't re-run.如果站点是现代 SPA(单页应用程序),它会通过 history.pushState 使用虚假导航,因此页面保持不变并且内容脚本不会重新运行。
To verify this is the case:要验证是否是这种情况:
Doc
in devtools toolbar filterDoc
If there's no Doc
request, you'll need matches
for the entire site eg *://www.example.com/*
and then either a) use MutationObserver in the content script or b) use chrome.webNavigation API onHistoryStateUpdated and onReferenceFragmentUpdated in the background script, which can be limited via URL filter to the site, the listener for these event(s) will send a message to the event's tabId, which will be received by the content script ( example ).如果没有
Doc
请求,您将需要整个站点的matches
项,例如*://www.example.com/*
然后 a) 在内容脚本中使用 MutationObserver 或 b) 使用 chrome.webNavigation API onHistoryStateUpdated 和 onReferenceFragmentUpdated后台脚本,可以通过URL 过滤器限制到站点,这些事件的侦听器将向事件的 tabId 发送消息,内容脚本将接收该消息(示例)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.