add chrome plugins

28736b79 · lwplvx · 94ef69a0 · 28736b79 · 28736b79 · 28736b79
14 changed file
--- a/Samples/chrome-plugins/translation-rocket/background.html
+++ b/Samples/chrome-plugins/translation-rocket/background.html
+<!doctype html>
+<html>
+
+<head>
+    <title>Background Page</title>
+</head>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
--- a/Samples/chrome-plugins/translation-rocket/css/custom.css
+++ b/Samples/chrome-plugins/translation-rocket/css/custom.css
--- a/Samples/chrome-plugins/translation-rocket/extension.png
+++ b/Samples/chrome-plugins/translation-rocket/extension.png
--- a/Samples/chrome-plugins/translation-rocket/img/icon.png
+++ b/Samples/chrome-plugins/translation-rocket/img/icon.png
--- a/Samples/chrome-plugins/translation-rocket/js/background.js
+++ b/Samples/chrome-plugins/translation-rocket/js/background.js
+console.log('translation-rocket ^_^ ')
+// background.js
+
+// chrome.contextMenus.create({
+//   title: '使用度娘搜索:%s', // %s表示选中的文字
+//   contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单
+//   onclick: function (params) {
+//     // 注意不能使用location.href,因为location是属于background的window对象
+//     chrome.tabs.create({
+//       url:
+//         'https://www.baidu.com/s?ie=utf-8&wd=' +
+//         encodeURI(params.selectionText),
+//     })
+//   },
+// })
+
+// 获取当前选项卡ID
+function getCurrentTabId(callback) {
+  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+    if (callback) callback(tabs.length ? tabs[0].id : null)
+  })
+}
+
+// 当前标签打开某个链接
+function openUrlCurrentTab(url) {
+  getCurrentTabId((tabId) => {
+    chrome.tabs.update(tabId, { url: url })
+  })
+} 
+
+function handleStateChange() {}
+
+chrome.contextMenus.create({
+  title: '发射选择的单词:%s', // %s表示选中的文字
+  contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单
+  onclick: function (params) { 
+
+    chrome.browserAction.setBadgeText({ text: 'new' })
+    chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] })
+
+    var xhr = new XMLHttpRequest()
+    xhr.onreadystatechange = handleStateChange // Implemented elsewhere.
+    xhr.open(
+      'GET',
+      // chrome.extension.getURL('/config_resources/config.json'),
+      'http://www.luoboit.cn/api/blog/post/query?Page=1&Limit=10',
+      true,
+    )
+    //访问内部位于config_resources目录下的config.json文件
+    xhr.send() 
+  },
+})
--- a/Samples/chrome-plugins/translation-rocket/js/content-script.js
+++ b/Samples/chrome-plugins/translation-rocket/js/content-script.js
--- a/Samples/chrome-plugins/translation-rocket/js/jquery.min.js
+++ b/Samples/chrome-plugins/translation-rocket/js/jquery.min.js
--- a/Samples/chrome-plugins/translation-rocket/js/popup.js
+++ b/Samples/chrome-plugins/translation-rocket/js/popup.js
+$(function () {
+  // alert('Hi')
+  console.log('hi trans-rocket')
+
+  $('#btnFireWord').on('click', function () {
+    console.log('biu ' + $('#word').val())
+    $.get('http://www.luoboit.cn/api/blog/post/query?Page=1&Limit=10')
+  })
+})
--- a/Samples/chrome-plugins/translation-rocket/manifest.json
+++ b/Samples/chrome-plugins/translation-rocket/manifest.json
+{
+    "name": "Translation-Rocket",
+    "description": "Translation-Rocket Extension",
+    "version": "1.0",
+    "manifest_version": 2,
+    // 新增内容如下
+    "browser_action": {
+        "default_popup": "popup.html",
+        // 图标悬停时的标题，可选
+        "default_title": "Translation-Rocket Chrome插件,发射单词到移动端",
+        "default_icon": "extension.png"
+    },
+    // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
+    // "web_accessible_resources": ["js/jquery.min.js"],
+    // 需要直接注入页面的JS
+    "content_scripts": [
+        {
+            //"matches": ["http://*/*", "https://*/*"],
+            // "<all_urls>" 表示匹配所有地址
+            // "matches": [
+            //     "<all_urls>"
+            // ],
+            "matches": [
+                "http://*/*",
+                "https://*/*"
+            ],
+            "all_frames": true,
+            // 多个JS按顺序注入
+            "js": [
+                "js/jquery.min.js",
+                "js/content-script.js",
+                "js/background.js"
+            ],
+            // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
+            "css": [
+                "css/custom.css"
+            ],
+            // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
+            "run_at": "document_start"
+        }
+    ],
+    // "content_scripts": [ 
+    //     { 
+    //         "js": [ "jquery.min.js", "background.js" ],
+    //          "matches": [ "http://*/*", "https://*/*"]
+    //      }
+    //  ] 
+    // 权限申请
+    "permissions": [
+        "contextMenus", // 右键菜单
+        "tabs", // 标签
+        "notifications", // 通知
+        "webRequest", // web请求
+        "webRequestBlocking",
+        "storage", // 插件本地存储
+        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
+        "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
+    ],
+    // 会一直常驻的后台JS或后台页面
+    "background": {
+        // 2种指定方式，如果指定JS，那么会自动生成一个背景页
+        // "page": "background.html"
+        "scripts": [
+            "js/background.js"
+        ]
+        // ,
+        // "persistent": false
+    }
+}
\ No newline at end of file
--- a/Samples/chrome-plugins/translation-rocket/package-lock.json
+++ b/Samples/chrome-plugins/translation-rocket/package-lock.json
+{
+  "name": "translation-rocket",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    }
+  }
+}
--- a/Samples/chrome-plugins/translation-rocket/package.json
+++ b/Samples/chrome-plugins/translation-rocket/package.json
+{
+  "name": "translation-rocket",
+  "version": "1.0.0",
+  "description": "[参考博客](https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html)\r https://www.jianshu.com/p/51c650f98d9c",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "jquery": "^3.6.0"
+  }
+}
--- a/Samples/chrome-plugins/translation-rocket/popup.html
+++ b/Samples/chrome-plugins/translation-rocket/popup.html
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <script src="js/jquery.min.js"></script>
+  <script src="js/popup.js"></script> 
+</head>
+
+<body>
+  <div>
+    <input type="text" id="word" />
+    <button type="button" id="btnFireWord">发射</button>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
--- a/Samples/chrome-plugins/translation-rocket/react.html
+++ b/Samples/chrome-plugins/translation-rocket/react.html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>菜鸟教程 React 实例</title>
+<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
+<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
+<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
+</head>
+<body>
+
+<div id="example"></div>
+<script type="text/babel">
+function HelloMessage(props) {
+	return <h1>Hello World!</h1>;
+}
+
+const element = <HelloMessage />;
+
+ReactDOM.render(
+	element,
+	document.getElementById('example')
+);
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- a/Samples/chrome-plugins/translation-rocket/readme.md
+++ b/Samples/chrome-plugins/translation-rocket/readme.md
+# 开发笔记
+
+[参考博客](https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html)
+https://www.jianshu.com/p/51c650f98d9c
+https://www.cnblogs.com/onlyfu/p/4458025.html
+https://dzone.com/articles/develop-your-first-google-chrome-extension-using-h-1
+https://www.cnblogs.com/champagne/p/4867665.html
\ No newline at end of file