feat: 实现developer.chrome.com网站背景换肤教程参考代码

5 years ago · 5d354dbc99
13 changed files with 125 additions and 21 deletions
--- a/README.md
+++ b/README.md
@ -10,4 +10,5 @@
 ## 参考引用
-* [chrome extensions Getting Started Tutorial](https://developer.chrome.com/extensions/getstarted)
+* [chrome extensions Getting Started Tutorial](https://developer.chrome.com/extensions/getstarted)
 * [360极速浏览器应用开放平台](http://open.chrome.360.cn/extension_dev/overview.html)
--- a/extension/background.js
+++ b/extension/background.js
@ -0,0 +1,19 @@
 chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({ color: "#3aa757" }, function() {
    console.log("The color is green.");
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostEquals: 'developer.chrome.com'}
          })
        ],
        actions: [
          new chrome.declarativeContent.ShowPageAction()
        ]
      }
    ])
  })
 })
--- a/extension/hello.html
+++ b/extension/hello.html
@ -1,7 +0,0 @@
 <html>
 <body>
    <h1>
        hello extensions
    </h1>
 </body>
 </html>
--- a/extension/hello_extensions.png
+++ b/extension/hello_extensions.png
--- a/extension/images/get_started128.png
+++ b/extension/images/get_started128.png
--- a/extension/images/get_started16.png
+++ b/extension/images/get_started16.png
--- a/extension/images/get_started32.png
+++ b/extension/images/get_started32.png
--- a/extension/images/get_started48.png
+++ b/extension/images/get_started48.png
--- a/extension/manifest.json
+++ b/extension/manifest.json
@ -1,19 +1,33 @@
 {
-    "name": "Hello Extensions",
+    "name": "Getting Started Example",
-    "description": "Base Level Extension",
+    "description": "Build an Extension",
    "version": "1.0",
    "manifest_version": 2,
-    "browser_action": {
+    "background": {
-        "default_popup": "hello.html",
+        "scripts": [
-        "default_icon": "hello_extensions.png"
+            "background.js"
        ],
        "persistent": false
    },
-    "commands": {
+    "options_page": "options.html",
-        "_execute_browser_action": {
+    "page_action": {
-            "suggested_key": {
+        "default_popup": "popup.html",
-                "default": "Ctrl+Shift+F",
+        "default_icon": {
-                "mac": "MacCtrl+Shift+F"
+            "16": "images/get_started16.png",
-            },
+            "32": "images/get_started32.png",
-            "description": "Opens hello.html"
+            "48": "images/get_started48.png",
            "128": "images/get_started128.png"
        }
-    }
+    },
    "icons": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
    },
    "permissions": [
        "storage",
        "declarativeContent",
        "activeTab"
    ]
 }
--- a/extension/options.html
+++ b/extension/options.html
@ -0,0 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div id="buttonDiv"></div>
    <div>
      <p>Choose a different background color!</p>
    </div>
    <script src="options.js"></script>
  </body>
 </html>
--- a/extension/options.js
+++ b/extension/options.js
@ -0,0 +1,17 @@
 let page = document.getElementById('buttonDiv')
 const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1']
 function constructOptions(kButtonColors) {
  for(let item of kButtonColors) {
    let button = document.createElement('button')
    button.style.backgroundColor = item
    button.addEventListener('click', function(){
      chrome.storage.sync.set( {
        color: item
      },function () {
        console.log('color is ' + item)
      })
    })
    page.appendChild(button)
  }
 }
 constructOptions(kButtonColors)
--- a/extension/pop.js
+++ b/extension/pop.js
@ -0,0 +1,17 @@
 let changeColor = document.getElementById('changeColor')
 chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color
    changeColor.setAttribute('value', data.color)
 })
 changeColor.onclick = function(element) {
    let color = element.target.value
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, function(tabs) {
        chrome.tabs.executeScript(
            tabs[0].id,
            {code: 'document.body.style.backgroundColor = "' + color + '";'}
        )
    })
 }
--- a/extension/popup.html
+++ b/extension/popup.html
@ -0,0 +1,19 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
 </head>
 <body>
  <button id="changeColor"></button>
  <script src='pop.js'></script>
 </body>
 </html>