js 写个 最简单的 chrome 插件,修改网页背景颜色

起因(目的):

阅读电子书的时候, 网页背景太亮了,看久了眼睛难受。

最近看的书是: 金瓶梅

估计至少需要2个星期才能看完。

操作步骤:

  1. 新建一个 manifest.json 文件, 填入一些信息。
    "manifest_version": 3, # 2 已经被废弃了。
  2. 新建图片文件夹,准备图片
  3. 打开:chrome://extensions/, 上传 插件文件夹

代码 1 js

js 复制代码
// document.body.style.backgroundColor = "red";

// document.body.style.backgroundColor = "#00ff00";

// document.body.style.backgroundColor = "rgb(255, 255, 0)";

// 如果当前网页的背景颜色是白色, 那么就修改背景颜色和字体颜色。否则不变。

// Function to get the current background color of the page
function getCurrentBgColor() {
    return window.getComputedStyle(document.body).getPropertyValue('background-color');
  }
  
// Function to change the background and text color
function changeColors() {
    const currentBgColor = getCurrentBgColor();

    // Check if the current background color is white
    if (currentBgColor === 'rgb(255, 255, 255)') {
        // Change the background color to #303841 and the text color to #d8dfea
        // document.body.style.backgroundColor = '#303841'; // sublime 的颜色
        
        document.body.style.backgroundColor = '#cab7e8'; // 淡紫色
        document.body.style.color = '#d8dfea';
    }
}
  
// Call the changeColors function when the page is loaded
window.addEventListener('load', changeColors);

代码 2 manifest.json, 核心配置文件!

json 复制代码
{
    "manifest_version": 3,
    "name": "Read More!",
    "description": "Change all background color",
    "version": "1.0",

    "icons": {
        "16": "/images/icon16.png",
        "48": "/images/icon48.png",
        "128": "/images/icon128.png"
    },
    
    "action": {
        "default_icon": {
            "16": "/images/icon16_active.png",
            "48": "/images/icon48_active.png",
            "128": "/images/icon128_active.png"
        }
    },

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

代码3, py文件, 用来生成各种尺寸的缩略图。

py 复制代码
from PIL import Image

# 目的  调整图片大小。做 Chrome 插件的时候,需要用到图标。
# 先找2张图片

def resize_image(input_name, out_name, out_width, out_height):
    img = Image.open(input_name)
    out = img.resize((out_width, out_height))
    out.save(out_name)


# 默认转态下的图标
input_image = "g1.jpg"
for i in [16, 48, 128]:
    out_image = f"icon{i}.png"
    resize_image(input_image, out_image, i, i)


# 插件激活状态的图标
input_image = "g2.png"
for i in [16, 48, 128]:
    out_image = f"icon{i}_active.png"
    resize_image(input_image, out_image, i, i)

结论 + todo

看下效果:

走过路过,支持一下啊。

相关推荐
拉不动的猪6 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
安冬的码畜日常39 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴41 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中44 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
朝阳5811 小时前
Rust项目GPG签名配置指南
开发语言·后端·rust
朝阳5811 小时前
Rust实现高性能目录扫描工具ll的技术解析
开发语言·后端·rust
程高兴1 小时前
基于Matlab的车牌识别系统
开发语言·matlab
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
牛马baby1 小时前
Java高频面试之并发编程-07
java·开发语言·面试