diff --git a/README.md b/README.md index 5e274b3..1e68ecf 100644 --- a/README.md +++ b/README.md @@ -10,4 +10,5 @@ ## 参考引用 -* [chrome extensions Getting Started Tutorial](https://developer.chrome.com/extensions/getstarted) \ No newline at end of file +* [chrome extensions Getting Started Tutorial](https://developer.chrome.com/extensions/getstarted) +* [360极速浏览器应用开放平台](http://open.chrome.360.cn/extension_dev/overview.html) \ No newline at end of file diff --git a/extension/background.js b/extension/background.js new file mode 100644 index 0000000..f773a32 --- /dev/null +++ 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() + ] + } + ]) + }) +}) diff --git a/extension/hello.html b/extension/hello.html deleted file mode 100644 index 87f8cfc..0000000 --- a/extension/hello.html +++ /dev/null @@ -1,7 +0,0 @@ - - -

- hello extensions -

- - \ No newline at end of file diff --git a/extension/hello_extensions.png b/extension/hello_extensions.png deleted file mode 100644 index 63ea0d2..0000000 Binary files a/extension/hello_extensions.png and /dev/null differ diff --git a/extension/images/get_started128.png b/extension/images/get_started128.png new file mode 100644 index 0000000..4c1cf87 Binary files /dev/null and b/extension/images/get_started128.png differ diff --git a/extension/images/get_started16.png b/extension/images/get_started16.png new file mode 100644 index 0000000..fb8531c Binary files /dev/null and b/extension/images/get_started16.png differ diff --git a/extension/images/get_started32.png b/extension/images/get_started32.png new file mode 100644 index 0000000..7715223 Binary files /dev/null and b/extension/images/get_started32.png differ diff --git a/extension/images/get_started48.png b/extension/images/get_started48.png new file mode 100644 index 0000000..94ddde9 Binary files /dev/null and b/extension/images/get_started48.png differ diff --git a/extension/manifest.json b/extension/manifest.json index da02569..9beace2 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -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" + ] } \ No newline at end of file diff --git a/extension/options.html b/extension/options.html new file mode 100644 index 0000000..d78b5e3 --- /dev/null +++ b/extension/options.html @@ -0,0 +1,24 @@ + + + + + + + + Document + + +
+
+

Choose a different background color!

+
+ + + diff --git a/extension/options.js b/extension/options.js new file mode 100644 index 0000000..47732de --- /dev/null +++ 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) \ No newline at end of file diff --git a/extension/pop.js b/extension/pop.js new file mode 100644 index 0000000..1e61fac --- /dev/null +++ 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 + '";'} + ) + }) +} \ No newline at end of file diff --git a/extension/popup.html b/extension/popup.html new file mode 100644 index 0000000..29b12a2 --- /dev/null +++ b/extension/popup.html @@ -0,0 +1,19 @@ + + + + + + Document + + + + + + + \ No newline at end of file