谷歌插件开发之笔趣阁

前言

最近在笔趣阁上看小说,感觉通过鼠标滑轮滚动来翻页、鼠标点击切换上一章下一章有点麻烦,所以就写了一个小插件来简化操作。
插件实现功能:可以通过键盘上的w按键和s按键来向上向下翻页,通过键盘上的a按键和d按键来跳转上一章下一章。

插件目录结构

谷歌插件开发之笔趣阁_第1张图片

具体代码

manifest.json 代码

{
     
    "manifest_version": 2,
    "name": "笔趣阁插件",
    "version": "2.0",
    "description": "简化下一页上一章下一章操作",
    "author": "tomhe",
    "icons": {
     
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },

    "content_scripts": [
        {
     
            "matches": [""],
            "js": ["js/main.js"],
            "run_at": "document_start"
        }
    ]
}

main.js 代码

// 加载完DOM元素后 会执行箭头函数中的内容
document.addEventListener("DOMContentLoaded", () => {
     
  // 获取网页当前完整的url
  let weburl = window.location.href;
  // 笔趣阁url
  let baseurl = "http://www.xbiquge.la/";

  // 判断当前网页是否是笔趣阁的子网页
  if (weburl.includes(baseurl)) {
     
    // alert(weburl);

    // 获取指定标签 并添加事件
    let preBtn = document.querySelectorAll(".bottem2>a")[1];
    let nextBtn = document.querySelectorAll(".bottem2>a")[3];

    document.addEventListener("keydown", (event) => {
     
      // 当用户按下 w/s 时 网页会向上向下移动850px
      // 当用户按下 a/d 时 网页会自动点击 上一章/下一章 按钮
      if (event.keyCode === 83) document.documentElement.scrollTop += 850;
      if (event.keyCode === 87) document.documentElement.scrollTop -= 850;
      if (event.keyCode === 65) preBtn.click();
      if (event.keyCode === 68) nextBtn.click();
    });
  }
});

插件效果演示

写在后面

第一次写插件可能存在着许多问题,如有错误,欢迎指出,十分感谢 。。。


2021/5/20更新
baseUrl 发生了变化,只需在http后加上s,即可正常使用
谷歌插件开发之笔趣阁_第2张图片

你可能感兴趣的:(插件开发,javascript,插件开发)