讓Chatgpt寫了個Chrome extension。 可以改變文學城的背景顏色,如此簡單。有意思

來源: 2023-12-16 13:45:31 [博客] [舊帖] [給我悄悄話] 本文已被閱讀:

想找一個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)

 




更多我的博客文章>>>