1

I'm new to chrome extensions and keep getting stuck with the basics so I'm clearly missing something. Similar questions have been asked but nothing seems to be work. I am trying to send a basic message to the content script but cannot console.log the message.

manifest.json

{
  "name": "Ext_Test",
  "version": "1.0",
  "description": "testing",
  "manifest_version": 2,
  "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "run_at": "document_start",
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Testing"
  },
  "permissions": [
    "tabs",
    "*://*/*"
  ]
}

background.js

chrome.tabs.onUpdated.addListener(function(tabId,info, tab) {
  if (info.status == "complete") {
      chrome.tabs.sendMessage(tabId, {action: "test", message: tab.url})
  }
});

content.js

console.log("before method");

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
  if(message.action == "test"){
    console.log(message);
  }
});

console.log("after method");

From the console log I can see "before method" and "after method" being printed but cannot see the message inside the function.

Update: popup.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script type="module" src="content.js"></script>
  </body>
</html>
user19573945
  • 11
  • 3
  • The inner console.log is shown when the tab is completely loaded so your content script should always receive it because it runs on document_start. The code is correct. I guess you didn't reload the extension on `chrome://extensions` page or the tab after editing the content script or manifest.json. – wOxxOm Mar 30 '20 at 13:06
  • One thing though: it's not "before" and "after" method, because there's no method here. Your code adds an event listener which will run at some later point in time. – wOxxOm Mar 30 '20 at 13:06
  • Yes thats the weird thing, I've reloaded and even closed and reopened my browser, it looks like something is missing. I'm trying to add the url to my popup and since I can't console.log, I can't add it to my HTML. – user19573945 Mar 30 '20 at 13:32
  • So what is the exact sequence of actions you perform? Your code works correctly on any site I've tried. – wOxxOm Mar 30 '20 at 13:42
  • The background.js sends the tab URL to the content script. The content script then adds this to a popup.html which displays to the user the URL of the current tab. – user19573945 Mar 30 '20 at 13:58
  • Er, I see the mistake: the content scripts run in web tabs, not in the browser_action popup. You didn't show your popup.html so I didn't spot it at once. The popup is an entirely different page with its own URL and DOM. – wOxxOm Mar 30 '20 at 14:11
  • Sorry I added the popup.html to the question. I have linked it to my content script but there was still no luck :( – user19573945 Mar 30 '20 at 14:19
  • The popup is an entirely different page, not related to web pages, so running content scripts there makes no sense. What do you want to accomplish with this listener? – wOxxOm Mar 30 '20 at 14:23
  • I just want to display the current tab url when the popup icon is clicked. So I needed the listener for the background script to get the URL rather than the chrome extension url. I didnt realize there was a difference between the popup and web page, I was able to add content to the popup via this content script. – user19573945 Mar 30 '20 at 14:32
  • Then you don't need neither the content script nor the background script. Make popup.js and load it in popup.html, then use chrome.tabs.query, see [How can I get the URL of the current tab from a Google Chrome extension?](https://stackoverflow.com/a/14251218) – wOxxOm Mar 30 '20 at 14:34
  • My next step is to make an ajax request from the background script and then I need to display the results in the popup. So i thought if i could do this then it would be easier to add that haha. As soon as I think I understand chrome extensions more I seem to stumble across another issues – user19573945 Mar 30 '20 at 14:40
  • You can probably make the request in popup.js if its results are useful only within the current "popup session" (the popup is terminated when hidden and started each time it's shown). – wOxxOm Mar 30 '20 at 14:42
  • sadly I need to send the request as the page loads to see whether I will redirect the user or not – user19573945 Mar 30 '20 at 14:49

0 Answers0