欢迎光临
我的个人博客网站

Chrome扩展程序开发 – 更改活动选项卡的default_icon


背景

Chrome Extension简单定义为浏览器的功能性扩展,由html、css、js和一个描述文件manifest.json组成,在浏览器的地址栏边上显示扩展图标。本质上其实就是一个由html、css、js、图片等资源组成的一个.crx后缀的压缩包。

问题

由于最近业务需要,不得不去了解一些相关内容。在实践的过程中,遇到问题,每当用户更改他所关注的标签时,用户浏览器中所有加载的标签都会根据需要更改图片icon。

Chrome扩展程序开发 - 更改活动选项卡的default_icon

 

 

 

 

Chrome扩展程序开发 - 更改活动选项卡的default_icon

 

 

解决思路

1、background.js定义监听事件addListener

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {     let re = new RegExp("^(http|https)://", "i");     //manifest.json  不設定 tabs permission 的情況下,若 permissions 有設定 url rule,符合條件的 url,tab.url 也會有資料     if (changeInfo.status === "complete" && re.test(tab.url)) {       showActionPage(tab);     }   }); 

  2、当页面加载完成的时候,进行判断

function showActionPage(details) {     let url = details.url,       //URL API       urlObject = new global.URL(url),       //hostname - 用它取得 amazon marketplace locale       hostName = urlObject.hostname,       marketplace = new global.AmazonMarketplace("", hostName),       locale = marketplace.getLocale().toUpperCase(),       menuType,       canLoadExtension = helper.checkLoadExtensionUrl(url);

3、符合条件的对icon进行设置

 //icon 變成藍色             chrome.browserAction.setIcon({               tabId: details.id,               path: {                 "16": "icon/browser/browser_icon_16.png",                 "48": "icon/browser/browser_icon_48.png",                 "64": "icon/browser/browser_icon_64.png",                 "128": "icon/browser/browser_icon_128.png"               }

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » Chrome扩展程序开发 – 更改活动选项卡的default_icon
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏