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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -1,19 +1,33 @@
 {
-    "name": "Hello Extensions",
-    "description": "Base Level Extension",
+    "name": "Getting Started Example",
+    "description": "Build an Extension",
    "version": "1.0",
    "manifest_version": 2,
-    "browser_action": {
-        "default_popup": "hello.html",
-        "default_icon": "hello_extensions.png"
+    "background": {
+        "scripts": [
+            "background.js"
+        ],
+        "persistent": false
    },
-    "commands": {
-        "_execute_browser_action": {
-            "suggested_key": {
-                "default": "Ctrl+Shift+F",
-                "mac": "MacCtrl+Shift+F"
-            },
-            "description": "Opens hello.html"
+    "options_page": "options.html",
+    "page_action": {
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "images/get_started16.png",
+            "32": "images/get_started32.png",
+            "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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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>