专栏首页sofu456chrome extension develop

chrome extension develop

基本文件

manifest.json

{
  "manifest_version": 2,

  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",

  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

popup.html

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style type="text/css">
      body {
        margin: 10px;
        white-space: nowrap;
      }

      h1 {
        font-size: 15px;
      }

      #container {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
    -->
    <script src="popup.js"></script>
  </head>

  <body>
    <h1>Background Color Changer</h1>
    <div id="container">
      <span>Choose a color</span>
      <select id="dropdown">
        <option selected disabled hidden value=''></option>
        <option value="white">White</option>
        <option value="pink">Pink</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
      </select>
    </div>
  </body>
</html>

popup.js

// Copyright (c) 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * Get the current URL.
 *
 * @param {function(string)} callback called when the URL of the current tab
 *   is found.
 */
function getCurrentTabUrl(callback) {
    // Query filter to be passed to chrome.tabs.query - see
    // https://developer.chrome.com/extensions/tabs#method-query
    var queryInfo = {
      active: true,
      currentWindow: true
    };
  
    chrome.tabs.query(queryInfo, (tabs) => {
      // chrome.tabs.query invokes the callback with a list of tabs that match the
      // query. When the popup is opened, there is certainly a window and at least
      // one tab, so we can safely assume that |tabs| is a non-empty array.
      // A window can only have one active tab at a time, so the array consists of
      // exactly one tab.
      var tab = tabs[0];
  
      // A tab is a plain object that provides information about the tab.
      // See https://developer.chrome.com/extensions/tabs#type-Tab
      var url = tab.url;
  
      // tab.url is only available if the "activeTab" permission is declared.
      // If you want to see the URL of other tabs (e.g. after removing active:true
      // from |queryInfo|), then the "tabs" permission is required to see their
      // "url" properties.
      console.assert(typeof url == 'string', 'tab.url should be a string');
  
      callback(url);
    });
  
    // Most methods of the Chrome extension APIs are asynchronous. This means that
    // you CANNOT do something like this:
    //
    // var url;
    // chrome.tabs.query(queryInfo, (tabs) => {
    //   url = tabs[0].url;
    // });
    // alert(url); // Shows "undefined", because chrome.tabs.query is async.
  }
  
  /**
   * Change the background color of the current page.
   *
   * @param {string} color The new background color.
   */
  function changeBackgroundColor(color) {
    var script = 'document.body.style.backgroundColor="' + color + '";';
    // See https://developer.chrome.com/extensions/tabs#method-executeScript.
    // chrome.tabs.executeScript allows us to programmatically inject JavaScript
    // into a page. Since we omit the optional first argument "tabId", the script
    // is inserted into the active tab of the current window, which serves as the
    // default.
    chrome.tabs.executeScript({
      code: script
    });
  }
  
  /**
   * Gets the saved background color for url.
   *
   * @param {string} url URL whose background color is to be retrieved.
   * @param {function(string)} callback called with the saved background color for
   *     the given url on success, or a falsy value if no color is retrieved.
   */
  function getSavedBackgroundColor(url, callback) {
    // See https://developer.chrome.com/apps/storage#type-StorageArea. We check
    // for chrome.runtime.lastError to ensure correctness even when the API call
    // fails.
    chrome.storage.sync.get(url, (items) => {
      callback(chrome.runtime.lastError ? null : items[url]);
    });
  }
  
  /**
   * Sets the given background color for url.
   *
   * @param {string} url URL for which background color is to be saved.
   * @param {string} color The background color to be saved.
   */
  function saveBackgroundColor(url, color) {
    var items = {};
    items[url] = color;
    // See https://developer.chrome.com/apps/storage#type-StorageArea. We omit the
    // optional callback since we don't need to perform any action once the
    // background color is saved.
    chrome.storage.sync.set(items);
  }
  
  // This extension loads the saved background color for the current tab if one
  // exists. The user can select a new background color from the dropdown for the
  // current page, and it will be saved as part of the extension's isolated
  // storage. The chrome.storage API is used for this purpose. This is different
  // from the window.localStorage API, which is synchronous and stores data bound
  // to a document's origin. Also, using chrome.storage.sync instead of
  // chrome.storage.local allows the extension data to be synced across multiple
  // user devices.
  document.addEventListener('DOMContentLoaded', () => {
    getCurrentTabUrl((url) => {
      var dropdown = document.getElementById('dropdown');
  
      // Load the saved background color for this page and modify the dropdown
      // value, if needed.
      getSavedBackgroundColor(url, (savedColor) => {
        if (savedColor) {
          changeBackgroundColor(savedColor);
          dropdown.value = savedColor;
        }
      });
  
      // Ensure the background color is changed and saved when the dropdown
      // selection changes.
      dropdown.addEventListener('change', () => {
        changeBackgroundColor(dropdown.value);
        saveBackgroundColor(url, dropdown.value);
      });
    });
  });

icon.png 在manifest.json中定义位置

chrome 调试

打开extension调试模式,加载文件目录,在chrome extension按钮出现后,右键inspect popup,添加调试断点,F5进入断点

chrome资料

https://crxdoc-zh.appspot.com/extensions/getstarted

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Texture

    Texture原名是AsyncDisplayKit,是Facebook的paper团队发布的一个基于UIKit的库,这个库能够将图片加载、布局计算以及UI渲染等...

    拉维
  • Vue的安装及使用快速入门

    注:安装过程 中有个选项(Use ESLint to line your code ?选择 No )

    李才哥
  • 【Flutter 专题】14 基本的 http 网络请求学习下~

    和尚搭建了几个基本的小页面,现在需要添加其中的业务逻辑,这就必不可少的用到网络请求;Flutter 中提供了 dart.io 方式进行网络请求,不管...

    阿策
  • js 数组对象深拷贝

    formData本来是父组件传过来的,但是我不想直接用,于是我直接赋值给一个formDataCopy的对象。

    Daotin
  • Java 8原生API也可以开发响应式代码?

    asphalt-automobile-automotive-1172105.jpg

    阿杜
  • 【Flutter 专题】图解 ListView 下拉刷新与上拉加载 (二)

    和尚上次尝试 ListView 异步加载列表数据时,用了三方库 flutter_refresh,这种方式使用很简单。但列表数据的加载也绝非一种,和尚...

    阿策
  • Glide源码解析(三)

    本篇是 Glide 系列的最后一篇,主要讲一下 into 方法里面的逻辑。into 的逻辑也是最多最复杂的,可能需要反复阅读源码才能搞清楚。

    俞其荣
  • UIScrollView

    前面两篇文章聊的UITableView和UICollectionView都是继承自UIScrollView,本篇文章就来简单聊聊UIScrollView。

    拉维
  • Vue服务端渲染和Vue浏览器端渲染的性能对比

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 v...

    Daotin
  • 快速学习正则表达式,不用死记硬背,这里有份中文资源和互动学习网站

    无论你使用的是Python、Java、Perl还是Shell,正则表达式是学习主流编程语言几乎绕不开的话题。有了它,就能帮你快速定位到符合筛选条件的文本内容。

    量子位

扫码关注云+社区

领取腾讯云代金券