让Chatgpt写了个Chrome extension。 可以改变文学城的背景颜色,如此简单。有意思

来源: freemanli01 2023-12-16 13:45:31 [] [博客] [旧帖] [给我悄悄话] 本文已被阅读: 次 (5271 bytes)

想找一个chrome extension, 让浏览器底色暗一点,眼睛舒服些。后来听说网上的Stylish等现成的程序都有过收集用户信息的历史,

所以问了chatgpt, 能不能做,结果人家立马就完成了。

如下是生成的几个小程序,放到一个文件夹,然后加载一下。很多页面的背景颜色就可以自己设定了。

Choose Background Color

   

   

content.js

// Read the stored color and apply it when the page loads

chrome.storage.sync.get(["backgroundColor"], function (result) {

  if (result.backgroundColor) {

    document.body.style.backgroundColor = result.backgroundColor;

  }

});

 

// Listen for messages to change the color

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {

  if (request.action === "changeColor") {

    document.body.style.backgroundColor = request.color;

    // Store the color for future pages

    chrome.storage.sync.set({ backgroundColor: request.color });

  }

});

manifest.json

{

  "manifest_version": 2,

  "name": "Background Changer",

  "version": "1.0",

  "description": "Change background color of all websites",

 

  "permissions": ["activeTab", "storage"],

 

  "browser_action": {

    "default_icon": "icon.png",

    "default_popup": "popup.html"

  },

  "content_scripts": [

    {

      "matches": [""],

      "js": ["content.js"]

    }

  ]

}

popup.html

 

 

popup.js

document.getElementById("applyButton").addEventListener("click", function () {

  var color = document.getElementById("colorPicker").value;

  chrome.storage.sync.set({ backgroundColor: color }, function () {

    console.log("Color is set to " + color);

  });

});

 

On the left are the file names, and the right are the content of each file.

Create a folder with any name you like, save all four files into that folder, and then create an icon.png file for the extension, save in the same folder.

 

In the google chrome, go to “Chrome://extension” --> on the top right corner, click “Developer mode” to enable it.  --> click “load unpacked” -->从新启动chrome, 可以用了。

注意要在extension manager 里 enable这个extension . 然后点击,就可以选背景颜色了.(下图那个 方框里的C, 就是那个icon)

 




更多我的博客文章>>>

所有跟帖: 

有了AI , 大家都可以过一把程序员的瘾,能不能根据时间自动调整,白天亮点傍晚暗点 -hot_powerz- 给 hot_powerz 发送悄悄话 hot_powerz 的博客首页 (0 bytes) () 12/16/2023 postreply 13:58:15

确实,都是小模块了。看来多少有点电脑知识,在AI时代还是有用的。没有往时间那方面问,对AI来说,应该是不难的。 -freemanli01- 给 freemanli01 发送悄悄话 freemanli01 的博客首页 (0 bytes) () 12/18/2023 postreply 08:57:38

好玩,试试 -弯刀月- 给 弯刀月 发送悄悄话 (0 bytes) () 12/25/2023 postreply 20:03:00

请您先登陆,再发跟帖!

发现Adblock插件

如要继续浏览
请支持本站 请务必在本站关闭Adblock

关闭Adblock后 请点击

请参考如何关闭Adblock

安装Adblock plus用户请点击浏览器图标
选择“Disable on www.wenxuecity.com”

安装Adblock用户请点击图标
选择“don't run on pages on this domain”