背景
Chrome Extension简单定义为浏览器的功能性扩展,由html、css、js和一个描述文件manifest.json组成,在浏览器的地址栏边上显示扩展图标。本质上其实就是一个由html、css、js、图片等资源组成的一个.crx后缀的压缩包。
问题
由于最近业务需要,不得不去了解一些相关内容。在实践的过程中,遇到问题,每当用户更改他所关注的标签时,用户浏览器中所有加载的标签都会根据需要更改图片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" }