Question

我有一个chrome扩展程序，它使用内容脚本和后台脚本。这些脚本也使用chrome.runtime.sendMessage进行相互通信。

但是当我在manifest.json中添加两个脚本时，只有后台脚本似乎正在工作。从清单中删除后台脚本可以解决问题并加载内容脚本。

我的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
  }
}

我的注入内容脚本（单独工作）：

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

我的后台脚本：

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

我认为你在为函数匹配api时遇到了麻烦。您甚至可能想要消除匿名函数以使一切正常运行。

内容脚本sendMessage的第一个（必填）参数是您要发送的消息。您正在使用的下一个参数是消息接收器将调用的回调。（并且不要重复使用变量名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);

onMessage的api可能比消息传递页面更清晰。我们将保留匿名函数，因为它会创建一个闭包。 create的api表示回调的参数是通知的id，这似乎是一个有用的信息（否则，你不需要任何回调）。第一个参数也是可选的，所以我们将删除它。它还说第一个强制性参数应为NotificationOptions，这需要type属性，其值为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;
}

目前还不清楚为什么你认为内容脚本没有加载。我的假设是你没有看到console.log电话。但这可能是由几个问题造成的，而不仅仅是“内容脚本无法加载”。我的猜测是，您遇到的内容仅在传递onMessage时提及：sendResponse在messageListener返回时变为无效，除非您return true;从messageListener转到sendResponse表示您希望异步发送响应。由于您create来自异步return true;，因此需要<h1 id="text1">Test</h1>来保持消息侦听器处于活动状态。

Answer 2

后台脚本需要权限。正如docs所述，当任何已安装的托管应用，包应用或扩展程序具有＆＃34; 背景＆＃34;权限，Chrome会在用户登录计算机后立即运行（无形） - 在用户启动Chrome之前。＆＃39; 背景＆＃39;权限还可让Chrome继续运行，直到用户明确退出Chrome。

您通常使用＆＃39; 背景＆＃39;使用背景页面，活动页面或背景窗口的权限。

Chrome：使用无效的内容和后台脚本

2 个答案: