文章目录

效果

谷歌安卓开发者网站的默认样式:

在这里插入图片描述

使用谷歌浏览器插件将谷歌安卓开发者网站的背景改为黑色:

在这里插入图片描述

代码

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")
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐