使用谷歌浏览器插件将谷歌安卓开发者网站的背景改为黑色
文章目录效果代码嗯,白色背景有点刺眼!效果谷歌安卓开发者网站的默认样式:使用谷歌浏览器插件将谷歌安卓开发者网站的背景改为黑色:代码manifest.json 文件:{"name": "https://developer.android.google.cn/","version": "1.0.0","description": "https://developer.android.google.cn
·
效果
谷歌安卓开发者网站的默认样式:
使用谷歌浏览器插件将谷歌安卓开发者网站的背景改为黑色:
代码
manifest.json 文件:
{
"name": "https://developer.android.google.cn/",
"version": "1.0.0",
"description": "https://developer.android.google.cn/",
"content_scripts": [
{
"matches": [ "https://developer.android.google.cn/*" ],
"js": [ "content-script.js" ]
}
],
"manifest_version": 2
}
content-script.js 文件:
// https://developer.chrome.com/docs/extensions/mv2/content_scripts/
window.onload = (event) => {
console.log(event)
// console.log(`The ID of the extension is ${chrome.runtime.id}.`)
main()
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver
// Creates and returns a new MutationObserver
// which will invoke a specified callback function when DOM changes occur.
const mutationObserver = new MutationObserver(function (records, observer) {
main()
})
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
// Configures the MutationObserver to begin receiving notifications
// through its callback function when DOM changes matching the given options occur.
mutationObserver.observe(document.body, { subtree: true, childList: true, attributes: true, attributeOldValue: true })
}
function main() {
// const body = document.querySelector("body")
const body = document.body
// console.log(body)
// https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
// https://developer.mozilla.org/en-US/docs/Web/CSS/color
// https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
body.style.setProperty("color", "#FFFFFF")
body.style.setProperty("background-color", "#000000")
// 顶部导航栏(上)
const divLogoRow = document.querySelector("div.devsite-top-logo-row")
divLogoRow.style.setProperty("color", "#FFFFFF")
divLogoRow.style.setProperty("background-color", "#000000")
const divLogoRowMiddle = document.querySelector("nav.devsite-tabs-wrapper")
divLogoRowMiddle.style.setProperty("color", "#FFFFFF")
divLogoRowMiddle.style.setProperty("background-color", "#000000")
// 顶部导航栏(下)
const divDevsiteHeaderBackground = document.querySelector("div.devsite-header-background")
divDevsiteHeaderBackground.style.setProperty("color", "#FFFFFF")
divDevsiteHeaderBackground.style.setProperty("background-color", "#000000")
const anchors = document.getElementsByTagName("a")
console.log(document.getElementsByTagName("a"))
for (let i = 0; i < anchors.length; i++) {
const node = anchors.item(i)
node.style.setProperty("color", "#FFFFFF")
}
// 侧边导航栏
const ulDevsiteNavList = document.querySelector("devsite-book-nav")
ulDevsiteNavList.style.setProperty("color", "#FFFFFF")
ulDevsiteNavList.style.setProperty("background-color", "#000000")
const spanDevsiteNavTextNodes = document.getElementsByClassName("devsite-nav-text")
// console.log(spanDevsiteNavTextNodes)
for (let i = 0; i < spanDevsiteNavTextNodes.length; i++) {
const node = spanDevsiteNavTextNodes.item(i)
node.style.setProperty("color", "#FFFFFF")
node.style.setProperty("background-color", "#000000")
}
// 文章区域
const article = document.querySelector("article.devsite-article")
article.style.setProperty("color", "#FFFFFF")
article.style.setProperty("background-color", "#000000")
const h1 = document.querySelector("h1.devsite-page-title")
h1.style.setProperty("color", "#FFFFFF")
}
更多推荐
已为社区贡献9条内容
所有评论(0)