浏览代码

初始化Chrome插件项目

alibct 7 月之前
当前提交
712f8c66ed
共有 9 个文件被更改,包括 76 次插入0 次删除
  1. 3 0
      .gitignore
  2. 21 0
      README.md
  3. 13 0
      css/popup.css
  4. 二进制
      images/icon128.png
  5. 二进制
      images/icon16.png
  6. 二进制
      images/icon48.png
  7. 4 0
      js/popup.js
  8. 20 0
      manifest.json
  9. 15 0
      popup.html

+ 3 - 0
.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.DS_Store
+*.log 

+ 21 - 0
README.md

@@ -0,0 +1,21 @@
+# 我的 Chrome 扩展
+
+这是一个 Chrome 浏览器扩展项目。
+
+## 安装说明
+
+1. 打开 Chrome 浏览器
+2. 访问 chrome://extensions/
+3. 开启开发者模式
+4. 点击"加载已解压的扩展程序"
+5. 选择本项目目录
+
+## 开发说明
+
+项目结构:
+
+- manifest.json: 扩展配置文件
+- popup.html: 扩展弹出窗口
+- css/: 样式文件目录
+- js/: JavaScript 文件目录
+- images/: 图标文件目录

+ 13 - 0
css/popup.css

@@ -0,0 +1,13 @@
+body {
+  width: 300px;
+  padding: 10px;
+}
+
+.container {
+  text-align: center;
+}
+
+h1 {
+  font-size: 18px;
+  color: #333;
+}

二进制
images/icon128.png


二进制
images/icon16.png


二进制
images/icon48.png


+ 4 - 0
js/popup.js

@@ -0,0 +1,4 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // 在这里添加popup页面的交互逻辑
+  console.log("扩展已加载");
+});

+ 20 - 0
manifest.json

@@ -0,0 +1,20 @@
+{
+  "manifest_version": 3,
+  "name": "我的Chrome扩展",
+  "version": "1.0.0",
+  "description": "一个新的Chrome浏览器扩展",
+  "permissions": [],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "images/icon16.png",
+      "48": "images/icon48.png",
+      "128": "images/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "images/icon16.png",
+    "48": "images/icon48.png",
+    "128": "images/icon128.png"
+  }
+}

+ 15 - 0
popup.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>我的Chrome扩展</title>
+    <link rel="stylesheet" href="css/popup.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>我的Chrome扩展</h1>
+      <p>欢迎使用!</p>
+    </div>
+    <script src="js/popup.js"></script>
+  </body>
+</html>