(新)Chrome浏览器自定义背景插件

简介: (新)Chrome浏览器自定义背景插件

一、效果预览

二、项目回顾

1、原理

主要是利用js脚本在页面打开前插入一个背景图片容器,在通过相应的事件控制来实现该功能。

2、功能

将网络图片设置为浏览器背景

3、使用

下载插件 --> 修改js文件(加入图片链接)–》 添加浏览器扩展 --> 刷新页面

4、局限

只能使用网页图片链接作为背景图片,修改背景图片需要频繁修改代码。

5、旧版本记录

旧版本开发详情可以查看该博客:自制浏览器网页背景是什么体验?

三、项目优化

1、背景图片选择

之前只能使用在线链接来设置背景图片,现在增加了多一种设置,可以将本地图片设置为背景图片,具体操作如下:

(1)点击页面插件小图标

(2)在插件页面上有个上传文件按钮,点击可以上传本地文件

这一点的优化改造主要是修改了图片文件的存放位置,由原来的本地js文件修改为浏览器的indexedDB数据库,选择indexedDB也是经过实践得出的方案。

(1)图片存放位置

浏览器缓存主要有以上几种,刚开始改造的时候我选择了localStorage,因为localStorage操作比较方便,一开始改造完还一度觉得很不错,知道后来,我上次了4,5张图片之后发现上传失败了,localStorage的缓存已经达到上限,所以后来才重新改成了使用indexedDB来代替localStorage。

(2)indexedDB数据库特点

该数据库主要有以下特点:

  • ① 非关系型数据库(NoSql)

我们都知道MySQL等数据库都是关系型数据库,它们的主要特点就是数据都以一张二维表的形式存储,而Indexed DB是非关系型数据库,主要以键值对的形式存储数据。

  • ② 持久化存储

cookie、localStorage、sessionStorage等方式存储的数据当我们清楚浏览器缓存后,这些数据都会被清除掉的,而使用IndexedDB存储的数据则不会,除非手动删除该数据库。

  • ③ 异步操作

IndexedDB操作时不会锁死浏览器,用户依然可以进行其他的操作,这与localStorage形成鲜明的对比,后者是同步的。

  • ④ 支持事务

IndexedDB支持事务(transaction),这意味着一系列的操作步骤之中,只要有一步失败了,整个事务都会取消,数据库回滚的事务发生之前的状态,这和MySQL等数据库的事务类似。

  • ⑤ 同源策略

IndexedDB同样存在同源限制,每个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。

  • ⑥ 存储容量大

这也是IndexedDB最显著的特点之一了,这也是不用localStorage等存储方式的最好理由。

(3)indexedDB数据库使用

本次主要使用到了一下几个方法:

  • ① 创建或连接数据库
/**
 * 打开数据库
 * @param {object} dbName 数据库的名字
 * @param {string} storeName 仓库名称
 * @param {string} version 数据库的版本
 * @return {object} 该函数会返回一个数据库实例
 */
function openDB(dbName, version = 1) {
  return new Promise((resolve, reject) => {
    //  兼容浏览器
    var indexedDB =
      window.indexedDB ||
      window.mozIndexedDB ||
      window.webkitIndexedDB ||
      window.msIndexedDB;
    let db;
    // 打开数据库,若没有则会创建
    const request = indexedDB.open(dbName, version);
    // 数据库打开成功回调
    request.onsuccess = function (event) {
      db = event.target.result; // 数据库对象
      console.log("数据库打开成功");
      resolve(db);
    };
    // 数据库打开失败的回调
    request.onerror = function (event) {
      console.log("数据库打开报错");
    };
    // 数据库有更新时候的回调
    request.onupgradeneeded = function (event) {
      // 数据库创建或升级的时候会触发
      console.log("onupgradeneeded");
      db = event.target.result; // 数据库对象
      var objectStore;
      // 创建存储库
      objectStore = db.createObjectStore("signalChat", {
        keyPath: "sequenceId", // 这是主键
        // autoIncrement: true // 实现自增
      });
      // 创建索引,在后面查询数据的时候可以根据索引查
      objectStore.createIndex("link", "link", { unique: false }); 
      objectStore.createIndex("sequenceId", "sequenceId", { unique: false });
      objectStore.createIndex("messageType", "messageType", {
        unique: false,
      });
    };
  });
}
  • ② 新增数据
/**
 * 新增数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {string} data 数据
 */
function addData(db, storeName, data) {
  var request = db
    .transaction([storeName], "readwrite") // 事务对象 指定表格名称和操作模式("只读"或"读写")
    .objectStore(storeName) // 仓库对象
    .add(data);
  request.onsuccess = function (event) {
    console.log("数据写入成功");
  };
  request.onerror = function (event) {
    console.log("数据写入失败");
  };
}
  • ③ 通过主键读取数据
/**
 * 通过主键读取数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {string} key 主键值
 */
function getDataByKey(db, storeName, key) {
  return new Promise((resolve, reject) => {
    var transaction = db.transaction([storeName]); // 事务
    var objectStore = transaction.objectStore(storeName); // 仓库对象
    var request = objectStore.get(key); // 通过主键获取数据
    request.onerror = function (event) {
      console.log("事务失败");
    };
    request.onsuccess = function (event) {
      console.log("主键查询结果: ", request.result);
      resolve(request.result);
    };
  });
}
  • ④ 更新数据
/**
 * 更新数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {object} data 数据
 */
function updateDB(db, storeName, data) {
  var request = db
    .transaction([storeName], "readwrite") // 事务对象
    .objectStore(storeName) // 仓库对象
    .put(data);
  request.onsuccess = function () {
    console.log("数据更新成功");
  };
  request.onerror = function () {
    console.log("数据更新失败");
  };
}
2、增加快捷键切换功能

之前只能通过页面上的按钮来进行背景切换控制,现在加入了键盘快捷键设置,可以设置自己喜好的快捷键方式来进行背景切换,具体设置的位置如下图:

3、插件弹出框修改

删除了原来界面的按钮,增加了背景图片列表预览、上传图片和删除图片的功能,具体页面如下:

  • 文件上传

点击选择文件可以上传图片。

  • 删除图片

点击图片会弹出删除框,点击删除即可删除图片。

4、使用
(1)下载代码

目前代码主要放在Gitee上,后续再同步到GitHub上,喜欢的朋友们可以来个star。

Gitee:https://gitee.com/zheng_yongtao/chrome-plug-in.git

具体文件夹如下:

(2)拖入浏览器扩展

浏览器地址输入:chrome://extensions/

开启开发者模式,直接将文件夹拉进去即可

(3)页面使用

页面上点击插件小图标,找到背景切换插件,点击即可使用。

四、参考文章

前端本地存储数据库IndexedDB完整教程

五、更多插件

浏览器网页背景换肤插件

浏览器桌面挂件动画插件

B站视频评论屏蔽插件

鼠标点击烟花效果,妹子看后直说酷

将B站视频设置为浏览器背景

目录
相关文章
|
4月前
|
数据可视化 Java Windows
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
本文介绍了如何在Windows环境下安装Elasticsearch(ES)、Elasticsearch Head可视化插件和Kibana,以及如何配置ES的跨域问题,确保Kibana能够连接到ES集群,并提供了安装过程中可能遇到的问题及其解决方案。
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
|
2天前
|
Web App开发 搜索推荐 开发者
浏览器插件上架指南:如何把你的产品搬上浏览器插件市场
在实践了 Chrone、Firefox、Edge、Opera 等 几个主要的插件平台的上架发布工作后,我觉得很有必要把这个过程和思考记录下来,分享给大家,希望能提供一些参考和避坑的经验。我想通过这篇文章,和大家聊聊「为什么我要做这件事」,以及「这个系列文章会包含哪些内容」。我想用一个系列的文章,记录我是如何把 EmojiClick 搬到浏览器插件市场的,也给大家提供一些借鉴经验。
43 19
|
8天前
|
Web App开发 安全 前端开发
一个接口4个步骤轻松搞定最新版Chrome、Edge、Firefox浏览器集成ActiveX控件
目前的浏览器市场,谷歌浏览器占据了半壁江山,因此,谷歌也是最有话语权的,2015年开始取消支持 NPAPI 插件,2022 年10月停止支持 PPAPI 插件;而曾经老大哥IE浏览器也已停止服务,退出历史舞台,导致大量曾经安全、便捷的ActiveX控件无法使用。为了解决这个难题,本人特研发出allWebPlugin中间件,重新让所有ActiveX控件能在谷歌、火狐等浏览器使用。
|
10天前
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本
|
2月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
212 2
|
2月前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
1235 2
|
2月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
397 9
|
2月前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
148 0
|
3月前
|
Web App开发 开发者
|
3月前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】