谷歌插件开发总结

前几天刚刚写了一个谷歌浏览器插件开发，现在总结一下。

1.谷歌浏览器插件模式

chrome://extensions/

小提示：下面谷歌浏览器设置需要你把插件项目建立好

开启之后会有 加载已解压的扩展程序

这个是导入你写好的插件目录然后就可以在谷歌浏览器进行运行了

然后把你写的插件开启

图中1是开启状态，图中2是刷新（比较你修改了插件代码要刷新一下，如果是配合网页调试也刷新一下网页），图中3是打开插件控制台（跟谷歌浏览器控制台一样）。好了谷歌浏览器设置我们就介绍到这里

2.新建项目介绍

主要你有web前端的基础，你写这插件很简单，你只需要学习它的规范，写这插件要求的技术：html、css、js。

一.项目目录如何搭建

重点是manifest.json任何插件都必须要有这个文件，用来描述插件的元数据，插件的配置信息。

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
  "permissions": ["declarativeContent", "storage", "activeTab"],
  "background": {
    "scripts": ["js/background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["js/jquery-1.8.3.js", "js/content.js"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": ["js/inject.js"],
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/16.png",
      "32": "img/32.png",
      "48": "img/48.png",
      "128": "img/128.png"
    }
  },
  "icons": {
    "16": "img/16.png",
    "32": "img/32.png",
    "48": "img/48.png",
    "128": "img/128.png"
  }
}

别的我就不介绍了，下面我会放一些好的文章，你进行学习就好了，我只重点介绍 如何在已有的网页进行DOM添加，如何调用网页里面的js方法

注意看看配置文件里面的

1.content_scripts（这个配置方法是向页面注入js），进行网页DOM添加、删除、修改

2.如何调用网页里面的js方法，在content_scripts 配置的 js文件里面在注入 js文件即可，注意要在 web_accessible_resources 里面配置一下

content.js

// 可以操作当前页面中的DOM
$(document).ready(function() {
    console.log("---加载content.js---");

    // 注入inject.js
    injectCustomJs();

    // 给页面添加元素
    let input = "<div style='margin: 50px 0 10px 0'>" +
        "<input type='text' id='circulationInput' placeholder='请填写次数' />"+
        "</div>";

    // 自行在自己想要的页面添加
    $("xxxx").append(button);

    let button = "<a class='sBtn sBtn-h36 sBtn-h36-o ml20 l' id='circulationButton' href=\"javascript:void(0);\">" +
        "<span style='width:100px;'>重复提交</span>" +
        "</a>";

    // 自行在自己想要的页面添加
    $("xxxx").append(button);
});
// 访问页面的js方法
function injectCustomJs() {
    // 自行写路径
    let jsPath = 'js/inject.js';

    var temp = document.createElement('script');
    temp.setAttribute('type', 'text/javascript');
    temp.src = chrome.extension.getURL(jsPath);
    temp.onload = function() {
        // 执行完后移除掉
        this.parentNode.removeChild(this);
    };
    // 挂载
    document.head.appendChild(temp);
}

inject.js

// 可以访问当前页面中的js
$(document).ready(function() {
    console.log("---inject.js---");
    console.log(window);
});

别的文件我就不放了都不是重要的。

大家可以先看看下面文章，然后在过来看我这篇

小茗同学的chrome插件开发全攻略

谷歌开发文档（中文）------需要翻墙