Chrome: Using both content and background scripts not working

Question

I have a chrome extension that uses both content script and a background script. Those scripts are also communicating with each other using chrome.runtime.sendMessage.

But when I add both scripts in manifest.json, only the background script seems to be working. Removing the background script from the manifest solves the problem and the content script get loaded.

My manifest.json

  "manifest_version": 2,
    ...
  "permissions": [
    "contentSettings",
    "notifications", 
    "storage",
    "https://*.soundcloud.com/*",
    "https://soundcloud.com/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://*.soundcloud.com/*",
        "https://soundcloud.com/*"
      ],
      "js": [
        "js/jquery/jquery.min.js",
        "js/arrive/arrive.min.js",
        "src/inject/inject.js"
      ]
    }
  ],
  "background": {
    "scripts": [
      "src/background/background.js"
    ],
    "persistent": false
  }
}

My injected content script (works on its own):

chrome.runtime.sendMessage(response, function(response) {
    console.log("FROM BACKGROUND: " + response);
});

My background script:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    var options = {
        type: "image",
        title: "Track now playing!",
        message: response.artist + " - " + response.title,
        imageUrl: response.artwork,
        isClickable: false
    };

    chrome.notifications.create("", options, function(e) {
        sendResponse("Notification was send!");
    });
});

Nothing looks off here, and it's indeed possible to have both a content and background script. Could you post minimal content and background scripts that show the content script isn't working? — Teepeemm
as I said when I am loading as it is right now the content script doesn't get loaded at all, but as soon I remove the background script everything works just fine! — Matthias
after looking into it again it seems like chrome.runtime.onMessage is undefined. Is there a permission necessary to use that object? — Matthias
No, chrome.runtime doesn't need permissions. Could you post minimal content and background scripts that show something isn't working? — Teepeemm

Teepeemm Teepeemm · Accepted Answer · 2016-02-21T21:01:55

I think you’re having trouble matching the api for the functions. You may even want to eliminate the anonymous functions to get everything working.

The first (mandatory) argument to content script’s sendMessage is the message you want to send. The next argument you’re using is the callback that the message receiver will call. (And don’t reuse the variable name response.)

inject.js:

var message = {
    “artist”: “Matthias”,
    “title”: “My Song”,
    “imageUrl”: “pic.png”
};

function sendResponse(response) {
    console.log(“notificationId is: “+response);
}

chrome.runtime.sendMessage(message,sendResponse);

The api for onMessage is probably a little clearer than the message passing page. We’ll keep the anonymous function because it creates a closure. The api for create states that the callback’s argument is the notification’s id, which seems like it would be a useful piece of information (otherwise, you don’t need any of your callbacks). Also the first argument is optional, so we’ll remove it. It also says the first mandatory argument should be NotificationOptions, which requires a type property whose value is a TemplateType.

background.js:

function messageListener(message,sender,sendResponse) {
    var options = {
        “type”: "image",
        “title”: "Track now playing!",
        “message”: message.artist + " - " + message.title,
        “imageUrl”: message.artwork,
        “isClickable”: false
    };

    chrome.notifications.create(options, function(notificationId) {
        sendResponse(notificationId);
    });

    return true;
}

It’s still not clear why you think the content script isn’t loading. My assumption is you’re not seeing the console.log call. But that could be caused by several problems, not just “content script not loading”. My guess is you’re running into something that’s mentioned only in passing in onMessage: sendResponse becomes invalid when messageListener returns, unless you return true; from messageListener to indicate you wish to send a response asynchronously. Since you’re sendResponseing from the asynchronous create, you need the return true; to keep the message listener active.

Chrome: Using both content and background scripts not working

2 Answers