Need help to put content script right way

[kieusonlam]

Hi I try to use content script, but it's seem to be not working.

What I do is:

Create new content.js

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
  // If the received message has the expected format...
  console.log('rn')
  if (msg.text === 'report_back') {
    // Call the specified callback, passing
    // the web-page's DOM content as argument
    sendResponse('Hello');
  }
});

add it to manifest

{
  "name": "movie-extension",
  "description": "A Vue.js web extension",
  "version": "1.0.0",
  "manifest_version": 2,
  "icons": {
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  },
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_title": "movie-extension",
    "default_popup": "popup/popup.html"
  },
  "content_scripts": [{
    "matches": ["*://*.google.com/*"],
    "js": ["content.js"]
  }],
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

add file to the CopyWebpackPlugin

new CopyWebpackPlugin([
      {from: 'icons', to: 'icons', ignore: ['icon.xcf']},
      {from: 'popup/popup.html', to: 'popup/popup.html'},
      {from: 'manifest.json', to: 'manifest.json'},
      {from: 'content.js', to: 'content.js'}
    ])

Try to use it in the vue component

<template>
  <div>
    <p>Hello world!</p>
    <button @click="test">Test</button>
  </div>
</template>

<script>
  export default {
    data () {
      return { }
    },
    methods: {
      test () {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.sendMessage(tabs[0].id, {text: 'report_back'}, function(response) {
            console.log(response);
          });
        });
      }
    }
  }
</script>

But I got undefined in the console.log :(

[Kocal]

Hey!

I think it's because the first argument of function sendResponse should be a JSON-ifiable object (doc).

Since you are passing a string, it's not working

[kieusonlam]

I did try something like

sendResponse({
      text: 'hello'
    })

but I still get undefined

In stackoverflow I saw them even use document.all[0].outerHTML

It's weird.

[Kocal]

Hum, pretty strange.
Also, is console.log('rn') called?

If it can help you, this is how I made my popup and background communicated together:

• background: https://github.com/Kocal/Solary/blob/1.8/packages/extension/src/background.ts#L31-L42
• popup: https://github.com/Kocal/Solary/blob/1.8/packages/extension/src/popup/App.vue#L20-L24

[Kocal]

Try to put tons of console.log (with timestamps, Console > Settings > Show timestamps) or use breakpoints with Chrome debugger

[kieusonlam]

No, the console.log('rn') is also not called.

I'm not quire sure what place else should I put the console.log

I try to interact thing with DOM (content script) and popup. Do you think there is something make them cannot contact together?

If this not an issue of this project, I think we should close this topic, and I might research another solution.

[Kocal]

Did you try to add tabs permission in the manifest?

[kieusonlam]

I just tried it, I also not work.

[Kocal]

Please update your content.js and vue component respectively with:

console.log('Injecting content.js');

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
  console.log('onMessage', { msg, sender });

  if (msg.text === 'report_back') {
    sendResponse('Hello');
  }
});

and

console.log('popup: run test()');

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  console.log('popup: tabs', tabs);

  chrome.tabs.sendMessage(tabs[0].id, {text: 'report_back'}, function(response) {
    console.log('popup: response', response);
  });
});

Then paste here the background and popup logs (with timestamps).

[kieusonlam]

I think the content is not loaded.

[Kocal]

It's because the line "matches": ["*://*.google.com/*"] of your manifest tells Chrome to inject your content.js only into Google's sites

[kieusonlam]

Oops! Yes, that were the problem. Sorry for bordering your time...