给脚本添加一个按钮

之前制作第一个油猴脚本，它可以编辑网页，现在来说一下为什么这么做。

// ==UserScript==// @name 编辑网页// @namespace http://tampermonkey.net/// @version 0.1// @description try to take over the world!// @author You// @match *://*/*// @icon https://www.google.com/s2/favicons?domain=chrome666.com// @grant none// ==/UserScript==
(function() { 'use strict';
 // Your code here... //编辑网页 document.querySelector("body").contentEditable="true";})();

在//==userScript==之间，是脚本的说明和声明区域，说明脚本的作用和声明脚本需要用到的功能。

从@name到@author，就如他的英文意思，是关于脚本的名字、作者等等，这里名字是：“网页编辑”，作者没有改，you。

@match 是说明脚本将匹配到哪些网站上生效，在这里我们匹配所有的网址，如果想匹配百度的首页，即https://www.baidu.com/和https://www.baidu.com。match语句可以有多个。

起作用的是

document.querySelector(“body”).contentEditable=”true”;

这是JavaScript里的语句，随便搜一搜都可以理解。解释一下：

document

每个载入浏览器的网页都会成为 Document 对象。Document 对象使我们可以从脚本中对页面中的所有元素进行访问。

querySelector

反回文档中匹配指定 CSS 选择器的一个元素。

body

包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。

contentEditable

规定元素内容是否可编辑。

这个脚本有一个缺陷，就是不想编辑网页时需要到油猴关闭，否则没法继续浏览网页。所以这次我们要给它添加一个按钮，需要时点按钮，不需要就不理它。

代码如下;

// ==UserScript==

// @name        添加按钮的编辑网页

// @namespace    http://tampermonkey.net/

// @version      0.1

// @description  try to take over the world!

// @author       You

// @match   http://*/*

// @match   https://*/*

// @icon         https://www.google.com/s2/favicons?domain=twinkstar.cn

// @grant        none

// ==/UserScript==

(function() {

    ‘use strict’;

    document.body.insertAdjacentHTML(“afterbegin”,”<button id=’mn’>按钮</button>”);

     document.getElementById(‘mn’).onclick = function bj(){

        document.querySelector(“body”).contentEditable=”true”;

    }

    // Your code here…

})();