如何根据用户登录改变图标的​​颜色 [英] How to change the color of icon according to user login

问题描述

我已经对我的网站进行了扩展。它导航到我的主页，这是我的登录页面。当用户登录到我的网站时，扩展名图标必须呈绿色，用户注销时，图标应显示为红色。请有人帮助我。我一直在尝试这两天，但我没有得到如何去做。

这是我的manifest.json文件：

  {
name：My First Extension，
version：1.0，
description： 
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：登录calpinemate ，
manifest_version：2，
browser_action：{
default_icon：icon_128.png
}，
background：{
persistent：false，
scripts：[background.js] 
}，
 
browser_action：{
default_title： 测试扩展，
default_icon：calpine_not_logged_in.png
}，
 
externally_connectable：{
matches：[http：/ /calpinemate.com] 
} 
} 
  

解决方案 div>

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

---

在您的网页上，您必须向该分机发送消息，以通知其用户的登录状态。

• 一旦用户成功登录，请确保您知道该扩展程序：

    chrome.runtime.sendMessage（
  < your-extension-id> ;, 
   {status：'LOGGED_IN'}）; 
    




• 一旦您检测到用户会话已结束（无论是已过期还是由于手动注销），请确保你知道扩展：
  
  

    chrome.runtime.sendMessage（
  < your-extension- id> ;, 
   {status：'LOGGED_OUT'}）; 
    

---

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

background.js：

  var url ='< your-webpage-url>'; 
 
 //监听外部消息（来自网页的消息）。 
 chrome.runtime.onMessageExternal.addListener（函数（msg，sender）{
 if（sender.url === url）{
 //好的，这个页面可以和我沟通。
 if（msg.status ==='LOGGED_IN'）{
 // Cool，用户登录。
 chrome.browserAction.setIcon（{path：'green.png' }}; 
} else if（msg.status ==='LOGGED_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>] 
} 
} 
  

I have made an extension to my website.It navigates to my home page which is my login page.When the user log on to my site,the extension icon must appear green and when user log out, the icon should appear red. Please someone help me. I have been trying these two days, but I am not getting how to do it.

Here is my manifest.json file:

{
    "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"]
    }
}

Here is my background.js file:

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

Here is my 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"]
    }
}

解决方案

One solution is to communicate the login status from your webpage to your extension (as explained here).

---

From your webpage you have to send messages to the extension to inform it about the user's login status.

• Once the user successfully logs in, make sure you let the extension know:

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

• Once you detect that the user's session has ended (either expired or due to manually logging out), make sure you let the extension know:

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

---

From your extension listen for messages from the webpage and update accordingly, e.g. change the extension's icon. You'll need two icons (e.g. red.png for indicating logged-out user and green.png for indicating logged-in user) and the source code below:

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>"]
  }
}

这篇关于如何根据用户登录改变图标的​​颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！