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

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

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

用户成功登录后，请务必告知扩展程序：

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

一旦检测到用户的会话已经结束（已过期或由于手动注销），请确保让扩展名知道：
```
chrome.runtime.sendMessage(
    <your-extension-id>,
    {status: 'LOGGED_OUT'});
```

在您的分机上收听来自网页的消息并进行相应更新，例如更改扩展程序的图标。您需要两个图标（例如red.png表示已注销用户，green.png表示已登录用户）以及下面的源代码：

<强> background.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'});
    }
  }
});

<强>的manifest.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>"]
  }
}

Answer 2

如果登录然后显示绿色图标，则可以将2个图标1保持为红色，其他为绿色并跟踪会话

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

2 个答案: