一、说明

扩展程序的 browser_action 的常用 API 的使用和示例。

2019-05-15_000948.jpg

二、manifest.json

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["storage", "declarativeContent", "contextMenus"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "browser_action":{
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

三、popup.html

因为使用了 popup 的显示方式，因此加了一些 按钮：

<html>
    <head>
      <title>Water Popup</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
      <style>
        .wrapper{ 
          width: 750px;
          height: 300px;
        }
        .btn {
          margin-bottom: 20px;
        }
      </style>
    </head>
    <body>
      <div class="wrapper container">
        <h2>browserAction </h2>
        <button class="btn btn-primary" id="setTitle">setTitle</button>
        <button class="btn btn-primary" id="getTitle">getTitle</button>
        <button class="btn btn-primary" id="setPopup">setPopup</button>
        <button class="btn btn-primary" id="getPopup">getPopup</button> 
        <button class="btn btn-primary" id="setBadgeText">setBadgeText</button> 
        <button class="btn btn-primary" id="clearBadgeText">clearBadgeText</button> 
        <button class="btn btn-primary" id="getBadgeText">getBadgeText</button> 
        <button class="btn btn-primary" id="setBadgeBackgroundColor">setBadgeBackgroundColor</button> 
        <button class="btn btn-primary" id="getBadgeBackgroundColor">getBadgeBackgroundColor</button> 
      </div> 
      <script src="popup.js"></script>
    </body>
  </html>

popup.js

页面的逻辑是放在 popup.js 中：

const buttonSetTitle = document.getElementById('setTitle');
const buttonGetTitle = document.getElementById('getTitle');
const setPopup = document.getElementById('setPopup');
const getPopup = document.getElementById('getPopup');
const setBadgeText = document.getElementById('setBadgeText');
const clearBadgeText = document.getElementById('clearBadgeText');
const getBadgeText = document.getElementById('getBadgeText');
const setBadgeBackgroundColor = document.getElementById('setBadgeBackgroundColor');
const getBadgeBackgroundColor = document.getElementById('getBadgeBackgroundColor');

buttonSetTitle && buttonSetTitle.addEventListener('click', () => {
    chrome.browserAction.setTitle({
        title: 'set new title'
    }, () => {
        alert('set new title successed!')
    })
});
 
buttonGetTitle && buttonGetTitle.addEventListener('click', () => {
    chrome.browserAction.getTitle({}, (res) => {
        alert(res);
    })
}); 

setPopup.addEventListener('click', () => {
    chrome.browserAction.setPopup({
        popup: './popup2.html' 
    }, (res) => {
        alert(JSON.stringify(res))
    }) 
});

getPopup.addEventListener('click', () => {
    chrome.browserAction.getPopup({}, (res) => {
        alert(JSON.stringify(res))
    })
});

setBadgeText.addEventListener('click', () => {
    chrome.browserAction.setBadgeText({
        text: 'newBadge'
    }, (res) => {
        alert(JSON.stringify(res))
    })
});

clearBadgeText.addEventListener('click', () => {
    chrome.browserAction.setBadgeText({
        text: ''
    }, (res) => {
        alert(JSON.stringify(res))
    })
});

getBadgeText.addEventListener('click', () => {
    chrome.browserAction.getBadgeText({}, (res) => {
        alert(JSON.stringify(res))
    })
});

setBadgeBackgroundColor.addEventListener('click', () => {
    chrome.browserAction.setBadgeBackgroundColor({
        color: '#FF5000'
    }, (res) => {
        alert(JSON.stringify(res))
    })
});

getBadgeBackgroundColor.addEventListener('click', () => {
    chrome.browserAction.getBadgeBackgroundColor({}, (res) => {
        alert(JSON.stringify(res))
    })
});

完整代码

github：

文章已经结束啦