编写一个简单的Tampermonkey脚本

前言

用了很久tampermonkey脚本，但一直没有自己写过，今天来尝试编写一个简单的脚本。

安装

去谷歌商店安装tampermonkey插件

https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo

Tampermonkey首页

https://www.tampermonkey.net/index.php

用vscode开发

首先在插件处添加新脚本

如果不用vscode可以直接在页面编辑器上写，但是没有代码提示，代码格式调整等，编写很麻烦，所以我们通过官方提供的@require 引入本地的js文件，然后用vscode编写这个js来开发

首先在tampermonkey设置里面勾选 允许访问文件网址

然后在vscode里面新建js文件，并把插件编辑的内容复制进来，修改头部注释

@name：插件名称

@namespace：命名空间

@version：版本号

@description：详细说明

@author：作者

@match：脚本运行在哪些网站上，* 表示通配符任意字符

@require：引入的外部文件

@icon：插件图标

在插件中引入该js文件的绝对路径

这个时候刷新页面可以看到脚本已经生效了，我们就可以进行开发了！

通过bing进行站内搜索

给书阙增加了一个bing的站内搜索功能

// ==UserScript==
// @name         书阙搜索助手
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  use bing search in ithere.net
// @author       TimothyC
// @match        *://www.ithere.net/*
// @icon         https://www.ithere.net/static/images/favicon.ico
// @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
// @grant        none
// ==/UserScript==

(function() {
  'use strict';
  const searchEle = $('input[placeholder="搜索"]');
  let searchParentEle = searchEle.parent().parent();
  const iconEle = searchParentEle.children('span');
  iconEle.click(() => {
    if (searchEle.val()){
      bingSearch(searchEle.val())
    }
  });
  searchEle.keypress((event) => {
    if (event.which == 13 && searchEle.val()) {
      bingSearch(searchEle.val())
    }
  });
})();

function bingSearch(keyword) {
  if (keyword) {
    window.open("https://cn.bing.com/search?q=site%3Awww.ithere.net+" + keyword);
  }
}