如何根据用户登录更改图标颜色

Question

我已经对我的网站进行了扩展。它导航到我的主页，即我的登录页面。当用户登录到我的网站时，扩展图标必须显示为绿色，当用户注销时，图标应显示为红色。请有人帮助我。这两天我一直在尝试，但我不知道该怎么做。

这是我的manifest.json 文件：

{
    "name": "My First Extension",
    "version": "1.0",
    "description": "The first extension that I made.",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": "icon_128.png"
    },
    "background": {
        "scripts": ["background.js"]
    }
}

这是我的background.js 文件：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.create({'url': "http://www.example.com"});
});

这是我的manifest.json：

{
    "name": "Calpine Extension",
    "version": "1.0",
    "description": "Log on to calpinemate",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": "icon_128.png"
    },
    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_title": "Test Extension",
        "default_icon": "calpine_not_logged_in.png"
    },

    "externally_connectable": {
        "matches": ["http://calpinemate.com"]
    }
}

Answer 1

一种解决方案是将登录状态从您的网页传达到您的扩展程序（如此处所述）。

您必须从您的网页向扩展程序发送消息以通知其用户的登录状态。

• 用户成功登录后，请确保让扩展程序知道：

  chrome.runtime.sendMessage(
      <your-extension-id>,
      {status: 'LOGGED_IN'});
  

• 一旦您检测到用户的会话已结束（过期或由于手动注销），请确保让扩展程序知道：

  chrome.runtime.sendMessage(
      <your-extension-id>,
      {status: 'LOGGED_OUT'});
  

从您的扩展程序中侦听来自网页的消息并进行相应更新，例如更改扩展程序的图标。您将需要两个图标（例如red.png，用于指示注销用户和green.png指示登录用户）和下面的源代码：

背景.js：

var url = '<your-webpage-url>';

// Listen for external messages (messages from web-pages).
chrome.runtime.onMessageExternal.addListener(function (msg, sender) {
  if (sender.url === url) {
    // OK, this page is allowed to communicate with me.
    if (msg.status === 'LOGGED_IN') {
      // Cool, the user is logged in.
      chrome.browserAction.setIcon({path: 'green.png'});
    } else if (msg.status === 'LOGGED_OUT') {
      // How sad, the user is logges out.
      chrome.browserAction.setIcon({path: 'red.png'});
    }
  }
});

清单.json：

{
  "manifest_version": 2,
  "name":    "Test Extension",
  "version": "0.0",

  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_title": "Test Extension",
    "default_icon": "red.png"
  },

  "externally_connectable": {
    "matches": ["<your-webpage-url>"]
  }
}