Chrome：无法同时使用内容脚本和后台脚本

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!");
    });
});

Answer 1

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 sendResponse ing from the asynchronous create , you need the return true; to keep the message listener active.

Answer 2

Background Script needs permission. As docs stated, when any installed hosted app, package app or extension has " background " permission, Chrome runs(invisibly) as soon as the user logs into their computer - before the user launches Chrome. The ' background ' permission also makes Chrome continue running until user explicitly quits Chrome.

You typically use the ' background ' permission with a backgroud page, event page or a background window.