Chrome extension - Execute content script for specific site url

Question

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

Answer 1

1. When you reload the extension you also need to reinject the content script(s).

2. 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.

   To verify this is the case:

   1. open devtools
   2. open Network panel
   3. click Doc in devtools toolbar filter
   4. click a link in the page to navigate within the site
   5. see if the request for the new URL is added to the network log

   If there's no Doc request, you'll need matches for the entire site e.g. *://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).