如何利用浏览器插件提效

openwayne
1,170 阅读2分钟

提效路上路漫漫，今天先了解一下如何制作一个简单的浏览器插件吧！

自制谷歌浏览器插件chromeExtensions

小白新手上路，先来做一个简易的demo吧！

第一步

创建一个文件夹 forDemo

文件夹内创建 manifest.json

 {     
   "name": "hello world",     
   "version": "1.0",     
   "description": "创建自己的浏览器插件",     
   "manifest_version": 2   
}

激活自制插件

  • 进入chrome://extensions
  • 打开开发者模式image.png
  • 点击"加载已解压的扩展程序"
  • 选择 forDemo 文件夹
  • 得到自制的第一个浏览器插件

第一步已经成功，开始了解background

创建 background.js

 chrome.runtime.onInstalled.addListener(function() {     
   chrome.storage.sync.set({color: '#3aa757'}, function() {       
     console.log("The color is green.");     
   });   
 });

修改manifest.json如下，加入background配置

{     
  "name": "Getting Started Example",     
  "version": "1.0",     
  "description": "Build an Extension!",     
  "background": {       
   "scripts": ["background.js"],       
   "persistent": false     
  },     
  "manifest_version": 2  
}

更新插件

查看结果

  • 来看一下我们制作的背景页。
  • 哈哈，发现了一个报错

解决它！修改manifest.json

  • 加入permissions选项，因为background.js中使用到了storage API
{   
  "name": "Getting Started Example",   
  "version": "1.0",   
  "description": "Build an Extension!",   
  "permissions": ["storage"],   
  "background": {    
    "scripts": ["background.js"],     
    "persistent": false   
  },   
  "manifest_version": 2
}

更新插件，查看结果

恭喜你，已经初步完成一个浏览器插件咯

接下来，介绍popup~~~

创建 popup.html

 <!DOCTYPE html>   
<html>     
<head>
  <style>         
    button {           
      height: 30px;           
      width: 30px;           
      outline: none;         
    }       
  </style>     
</head>     
<body>       
  <button id="changeColor"></button>     
</body>   
</html>

修改manifest.json

  • 加入 page_action 部分，作用是指定popup.html，以及显示的icon，修改 permissions部分
  • forDemo下创建images文件夹
  • 从 iconfont上下载几个心仪的图标
{     
  "name": "Getting Started Example",     
  "version": "1.0",     
  "description": "Build an Extension!",     
  "permissions": ["declarativeContent", "storage"],    
  "background": {       
    "scripts": ["background.js"],       
    "persistent": false     
  },     
  "page_action": {       
    "default_popup": "popup.html",       
    "default_icon": {         
      "16": "images/get_started16.png",         
      "32": "images/get_started32.png",         
      "48": "images/get_started48.png",         
      "128": "images/get_started128.png"       
    }     
  },     
  "icons": {       
    "16": "images/get_started16.png",       
    "32": "images/get_started32.png",       
    "48": "images/get_started48.png",       
    "128": "images/get_started128.png"     
  },     
  "manifest_version": 2   
}

修改background.js

chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log('The color is green.');
    });
    /*in*/
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
      chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostEquals: 'developer.chrome.com'},
          })
        ],
        actions: [
          new chrome.declarativeContent.ShowPageAction()
        ]
      }]);
    });
    /*in*/
});

重新载入

获得一个带有你自己印记的浏览器插件！ image.png

接下来，我们使用插件来修改 www.iconfont.cn 的背景色！

创建pop.js，代码如下

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function (data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function (element) {
  let color = element.target.value;
  chrome.tabs.query({ 
    active: true, 
    currentWindow: true 
  }, function (tabs) {
    chrome.tabs.executeScript(tabs[0].id, {
      code:
        'document.querySelector(".collections-lists").style.backgroundColor = "' +
        color +
        '";',
    });
  });
};
//in

修改popup.html,引入script标签

<!DOCTYPE html>
<html>
...
  <body>
    <button id="changeColor"></button>
    <!-- in -->
    <script src="popup.js"></script>
  </body>
</html>

修改background.js

chrome.runtime.onInstalled.addListener(function () {
  chrome.storage.sync.set({ color: '#3aa757' }, function () {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { hostEquals: 'www.iconfont.cn' },
          }),
        ],
        actions: [new chrome.declarativeContent.ShowPageAction()],
      },
    ]);
  });
});

修改pernisson 列表，添加activeTab，declarativeContent

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/apple.png",
      "32": "images/pineapple.png",
      "48": "images/strawberry.png",
      "128": "images/cabbage.png"
    }
  },
  "icons": {
    "16": "images/apple.png",
    "32": "images/pineapple.png",
    "48": "images/strawberry.png",
    "128": "images/cabbage.png"
  },
  "manifest_version": 2
}

重新刷新插件,并且开启你的插件

image.png

打开网站

最后

微信搜索公众号Eval Studio，关注更多动态。

avatar
文章
阅读
粉丝