Need help to put content script right way

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 😦

[kieusonlam]

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

[Kocal]

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