{"id":19006619,"url":"https://github.com/deepred5/chrome-extensions-guides","last_synced_at":"2025-04-22T19:24:16.234Z","repository":{"id":89927208,"uuid":"70228112","full_name":"deepred5/chrome-extensions-guides","owner":"deepred5","description":"chrome插件开发小教程","archived":false,"fork":false,"pushed_at":"2017-01-09T04:08:54.000Z","size":31,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T18:11:09.692Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deepred5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-07T08:24:10.000Z","updated_at":"2018-06-04T02:07:22.000Z","dependencies_parsed_at":"2023-05-30T13:30:41.249Z","dependency_job_id":null,"html_url":"https://github.com/deepred5/chrome-extensions-guides","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepred5%2Fchrome-extensions-guides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepred5%2Fchrome-extensions-guides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepred5%2Fchrome-extensions-guides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepred5%2Fchrome-extensions-guides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deepred5","download_url":"https://codeload.github.com/deepred5/chrome-extensions-guides/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249293442,"owners_count":21245747,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T18:33:18.316Z","updated_at":"2025-04-22T19:24:16.224Z","avatar_url":"https://github.com/deepred5.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chrome插件小教程\n\n**[在线教学视频](http://www.bilibili.com/video/av6584244/)**\n\n### 新建一个文件夹,文件下建立images文件夹和js文件夹\n\nimages文件夹用来放插件图标\n\n注意:图标要是png格式\n\n\n\n### 1.建立manifest.json文件\n\n```javascript\n{\n    \"manifest_version\": 2,\n    \"name\": \"hentai\",\n    \"version\": \"1.0\",\n    \"description\": \"hentai插件\",\n    \"icons\": {\n        \"16\": \"images/hentai.png\",\n        \"48\": \"images/hentai.png\",\n        \"128\": \"images/hentai.png\"\n    },\n    \"browser_action\": {\n        \"default_icon\": {\n            \"19\": \"images/hentai.png\",\n            \"38\": \"images/hentai.png\"\n        },\n        \"default_title\": \"hentai\",\n        \"default_popup\": \"popup.html\"\n    }\n}\n```\n\n### 2.新建一个popup.html\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003ehentai\u003c/title\u003e\n    \u003cstyle type=\"text/css\"\u003e\n        body {\n            width: 250px;\n            text-align: center;\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch3\u003e做MAD的都是SB\u003c/h3\u003e\n    \u003ch3\u003e自古多情留不住，总是套路得人心\u003c/h3\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 3.添加右键显示功能\n\n * 更改manifest.json文件，添加：\n```javascript\n\"background\": {\n        \"scripts\": [\n            \"js/background.js\"\n        ]\n },\n\"permissions\": [\"tabs\", \"contextMenus\"]\n```\n\n * 在js文件夹新建background.js\n```javascript\nchrome.contextMenus.create({\n    type: 'normal',\n    title: '隐藏网页',\n    id: 'a',\n    onclick: hide\n});\n\nfunction hide() {}\n```\n\n### 4.实现隐藏功能\n\n * 完成hide函数\n```javascript\nfunction hide() {\n    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {\n        chrome.tabs.sendMessage(tabs[0].id, { info: \"hide\" });\n    });\n}\n```\n\n * 更改manifest.json文件，添加：\n```javascript\n\"content_scripts\": [{\n        \"matches\": [\"http://*/\", \"https://*/\", \"http://*/*\", \"https://*/*\"],\n        \"js\": [\"js/hide.js\"]\n}]\n```\n\n * 在js文件夹新建hide.js\n```javascript\nvar hentaiFlag = true;\nvar hentaiTitle = '好好学习';\nvar oriTitle = document.title;\n\nchrome.runtime.onMessage.addListener(\n    function(request) {\n        if (request.info == \"hide\") {\n            if (hentaiFlag) {\n                document.body.style.opacity = 0;\n                document.title = hentaiTitle;\n            } else {\n                document.body.style.opacity = 1;\n                document.title = oriTitle;\n            }\n            hentaiFlag = !hentaiFlag;\n        }\n    }\n);\n```\n\n### 5.实现点击图标也可以隐藏网页\n\n * 在js文件夹新建index.js,并在popup页面引入\n```javascript\nchrome.runtime.sendMessage({info: \"hide\"});\n```\n\n * 修改background.js\n```javascript\nchrome.runtime.onMessage.addListener(\n    function(request) {\n        if (request.info == \"hide\") {\n            hide();\n        }\n    }\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepred5%2Fchrome-extensions-guides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepred5%2Fchrome-extensions-guides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepred5%2Fchrome-extensions-guides/lists"}