自制谷歌浏览器插件（一）

天圣_sxyengene
3,294 阅读2分钟

自制谷歌浏览器插件chromeExtensions（一）

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

第一步

创建一个文件夹 forDemo

文件夹内创建 manifest.json

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

激活自制插件

  • 进入chrome://extensions
  • 打开开发者模式
  • 点击"加载已解压的扩展程序"
  • 选择 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*/
  });

重新载入

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

接下来，我们使用插件来修改 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="pop.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
}

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

打开网站

avatar
文章
阅读
粉丝