├── .editorconfig
├── .github
├── FUNDING.yml
├── ISSUE_TEMPLATE
│ ├── bug_report.md
│ ├── config.yml
│ ├── documentation.md
│ └── feature_request.md
└── workflows
│ ├── build.yml
│ ├── pr-build.yml
│ └── release.yml
├── .gitignore
├── .husky
├── commit-msg
└── pre-commit
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── README_zh.md
├── SECURITY.md
├── commitlint.config.js
├── eslint.config.js
├── lint-staged.config.js
├── package.json
├── packages
├── chrome-extension
│ ├── config
│ │ ├── pack.js
│ │ ├── paths.js
│ │ ├── webpack.common.js
│ │ └── webpack.config.js
│ ├── package.json
│ ├── src
│ │ ├── background.ts
│ │ ├── contentScript.ts
│ │ ├── injectedScript.ts
│ │ ├── options.scss
│ │ ├── options.ts
│ │ ├── popup.scss
│ │ ├── popup.ts
│ │ └── types
│ │ │ └── global.d.ts
│ └── tsconfig.json
├── firefox-extension
│ ├── config
│ │ ├── pack.js
│ │ ├── paths.js
│ │ ├── webpack.common.js
│ │ └── webpack.config.js
│ ├── package.json
│ ├── src
│ │ ├── background.ts
│ │ ├── contentScript.ts
│ │ ├── injectedScript.ts
│ │ ├── options.scss
│ │ ├── options.ts
│ │ ├── popup.scss
│ │ ├── popup.ts
│ │ └── types
│ │ │ └── global.d.ts
│ └── tsconfig.json
└── shared
│ ├── config
│ ├── paths.js
│ ├── webpack.common.js
│ └── webpack.config.js
│ ├── package.json
│ ├── src
│ ├── main.ts
│ ├── types
│ │ └── index.ts
│ └── utils
│ │ └── index.ts
│ └── tsconfig.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── public
├── chrome-manifest.json
├── firefox-manifest.json
├── icons
│ ├── icon_128.png
│ ├── icon_16.png
│ ├── icon_32.png
│ └── icon_48.png
├── options.html
└── popup.html
├── renovate.json
└── tsconfig.root.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # See https://editorconfig.org for more about editor config.
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | # Match all files
7 | [*]
8 | charset = utf-8
9 | end_of_line = lf
10 | indent_size = 2
11 | indent_style = space
12 | insert_final_newline = true
13 | max_line_length = 80
14 | trim_trailing_whitespace = true
15 |
16 | # Markdown files
17 | [*.md]
18 | max_line_length = 0
19 | trim_trailing_whitespace = false
20 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
12 | polar: # Replace with a single Polar username
13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
14 | custom: [https://zhensherlock.github.io/img/微信打赏.jpg]
15 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🐛 Bug Report (缺陷反馈)"
3 | about: 'Report errors to help us improve（报告错误以帮助我们改进）'
4 | labels: '🐛 Bug'
5 | ---
6 |
7 |
12 |
13 | ### 以前的Issues
14 |
15 |
16 |
17 | ### 问题描述
18 |
19 |
20 |
21 | ### 复现步骤
22 |
23 |
26 |
27 | ### 环境详情
28 |
29 | - **`vue-devtools-unlocker` version:**
30 | - **`vue` version:**
31 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: true
2 | contact_links:
3 | - name: 🤔 Ask a question（提问和讨论）
4 | url: https://github.com/zhensherlock/vue-devtools-unlocker/discussions
5 | about: Ask questions and discuss with other community members（提出问题并与其他社区成员讨论）
6 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/documentation.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "📝 Documentation (文档相关)"
3 | about: 'Repair or supplement documentation（修复或补充文档）'
4 | labels: '📝 Documentation'
5 | ---
6 |
7 |
10 |
11 | ## 哪些文档页面需要修复
12 |
13 | ## 需要修改什么来解决问题
14 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: '✨ Feature request（新需求）'
3 | about: 'Propose new functional requirements（提出新的功能需求）'
4 | labels: '✨ Feature Request'
5 | ---
6 |
7 |
10 |
11 | ## 新功能
12 |
13 | ### 您建议的新功能或更新功能是什么？
14 |
15 | ### 为什么要包含此功能？
16 |
--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | name: build
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 |
8 | jobs:
9 | build:
10 | if: github.repository == 'zhensherlock/vue-devtools-unlocker'
11 | runs-on: ubuntu-latest
12 | steps:
13 | - name: Checkout
14 | uses: actions/checkout@v4
15 | with:
16 | fetch-depth: 0
17 |
18 | - name: Install Node
19 | uses: actions/setup-node@v4
20 | with:
21 | node-version: 22
22 |
23 | - name: Install PNPM
24 | run: npm i pnpm@latest -g
25 |
26 | - name: Setup npmrc
27 | run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
28 |
29 | - name: setup pnpm config
30 | run: pnpm config set store-dir $PNPM_CACHE_FOLDER
31 |
32 | - name: Install Package
33 | run: pnpm install
34 |
35 | - name: Build Package
36 | run: pnpm build
37 |
38 | # - name: Test Package
39 | # run: pnpm run test
40 |
41 | # - name: Upload coverage reports to Codecov
42 | # uses: codecov/codecov-action@v5
43 | # with:
44 | # verbose: true
45 | # env:
46 | # CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
47 |
--------------------------------------------------------------------------------
/.github/workflows/pr-build.yml:
--------------------------------------------------------------------------------
1 | name: PR Build
2 |
3 | on:
4 | pull_request:
5 | branches:
6 | - main
7 | - dev
8 |
9 | jobs:
10 | build:
11 | if: github.repository == 'zhensherlock/vue-devtools-unlocker'
12 | runs-on: ubuntu-latest
13 | steps:
14 | - name: Checkout
15 | uses: actions/checkout@v4
16 | with:
17 | fetch-depth: 0
18 |
19 | - name: Install Node
20 | uses: actions/setup-node@v4
21 | with:
22 | node-version: 22
23 |
24 | - name: Install PNPM
25 | run: npm i pnpm@latest -g
26 |
27 | - name: Setup npmrc
28 | run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
29 |
30 | - name: setup pnpm config
31 | run: pnpm config set store-dir $PNPM_CACHE_FOLDER
32 |
33 | - name: Install Package
34 | run: pnpm install
35 |
36 | - name: Build Package
37 | run: pnpm build
38 |
39 | # - name: Test Package
40 | # run: pnpm run test
41 |
42 | - name: Pack Extension
43 | run: pnpm run pack
44 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | release:
5 | types: [created]
6 |
7 | jobs:
8 | build:
9 | if: github.repository == 'zhensherlock/vue-devtools-unlocker'
10 | runs-on: ubuntu-latest
11 | permissions:
12 | contents: write
13 | steps:
14 | - name: Set Version from Release Tag
15 | run: echo "VERSION=${{ github.event.release.tag_name }}" >> $GITHUB_ENV
16 |
17 | - name: Checkout
18 | uses: actions/checkout@v4
19 | with:
20 | fetch-depth: 0
21 |
22 | - name: Install Node
23 | uses: actions/setup-node@v4
24 | with:
25 | node-version: 22
26 |
27 | - name: Install PNPM
28 | run: npm i pnpm@latest -g
29 |
30 | - name: Setup npmrc
31 | run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
32 |
33 | - name: setup pnpm config
34 | run: pnpm config set store-dir $PNPM_CACHE_FOLDER
35 |
36 | - name: Install Package
37 | run: pnpm install
38 |
39 | - name: Build Package
40 | run: pnpm build
41 |
42 | - name: Pack Extension
43 | run: pnpm run pack
44 |
45 | - name: Install GitHub CLI
46 | run: sudo apt-get install gh
47 |
48 | - name: Upload Chrome Extension
49 | env:
50 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
51 | VERSION: ${{ env.VERSION }}
52 | run: gh release upload ${{ github.event.release.tag_name }} "packages/chrome-extension/release/Vue Devtools Unlocker-chrome-${{ env.VERSION }}.zip" --repo ${{ github.repository }}
53 |
54 | - name: Upload Firefox Extension
55 | env:
56 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
57 | VERSION: ${{ env.VERSION }}
58 | run: gh release upload ${{ github.event.release.tag_name }} "packages/firefox-extension/release/Vue Devtools Unlocker-firefox-${{ env.VERSION }}.zip" --repo ${{ github.repository }}
59 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules/
5 |
6 | # production
7 | build/
8 |
9 | # misc
10 | .DS_Store
11 |
12 | npm-debug.log*
13 |
14 | # packed files
15 | release/
16 |
17 | .idea
18 |
--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | npx --no-install commitlint --edit $1
2 |
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | npx lint-staged
2 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v22
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # See https://prettier.io/docs/en/ignore.html for more about ignoring files from Prettier.
2 |
3 | # Ignore artifacts:
4 | build
5 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 120,
3 | "singleQuote": true,
4 | "trailingComma": "es5",
5 | "bracketSpacing": true,
6 | "bracketSameLine": false,
7 | "arrowParens": "always",
8 | "htmlWhitespaceSensitivity": "css",
9 | "insertPragma": false,
10 | "semi": true
11 | }
12 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.
6 |
7 | We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
8 |
9 | ## Our Standards
10 |
11 | Examples of behavior that contributes to a positive environment for our community include:
12 |
13 | - Demonstrating empathy and kindness toward other people
14 | - Being respectful of differing opinions, viewpoints, and experiences
15 | - Giving and gracefully accepting constructive feedback
16 | - Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
17 | - Focusing on what is best not just for us as individuals, but for the overall community
18 |
19 | Examples of unacceptable behavior include:
20 |
21 | - The use of sexualized language or imagery, and sexual attention or advances of any kind
22 | - Trolling, insulting or derogatory comments, and personal or political attacks
23 | - Public or private harassment
24 | - Publishing others' private information, such as a physical or email address, without their explicit permission
25 | - Other conduct which could reasonably be considered inappropriate in a professional setting
26 |
27 | ## Enforcement Responsibilities
28 |
29 | Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
32 |
33 | ## Scope
34 |
35 | This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
36 |
37 | ## Enforcement
38 |
39 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [zhensherlock@126.com](mailto:zhensherlock@126.com). All complaints will be reviewed and investigated promptly and fairly.
40 |
41 | All community leaders are obligated to respect the privacy and security of the reporter of any incident.
42 |
43 | ## Enforcement Guidelines
44 |
45 | Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
46 |
47 | ### 1. Correction
48 |
49 | **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
50 |
51 | **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
52 |
53 | ### 2. Warning
54 |
55 | **Community Impact**: A violation through a single incident or series of actions.
56 |
57 | **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
58 |
59 | ### 3. Temporary Ban
60 |
61 | **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
62 |
63 | **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
64 |
65 | ### 4. Permanent Ban
66 |
67 | **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
68 |
69 | **Consequence**: A permanent ban from any sort of public interaction within the community.
70 |
71 | ## Attribution
72 |
73 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
74 |
75 | Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder][Mozilla CoC].
76 |
77 | For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at [https://www.contributor-covenant.org/translations][translations].
78 |
79 | [homepage]: https://www.contributor-covenant.org
80 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
81 | [Mozilla CoC]: https://github.com/mozilla/diversity
82 | [FAQ]: https://www.contributor-covenant.org/faq
83 | [translations]: https://www.contributor-covenant.org/translations
84 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 MichaelSun
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 |
6 |
7 | [![][chrome-web-store-version]][chrome-web-store-link]
8 | [![][chrome-web-store-size]][chrome-web-store-link]
9 | [![][chrome-web-store-last-updated]][chrome-web-store-link]
10 | [![][github-action-build-shield]][github-action-build-link]
11 | [![][github-license-shield]][github-license-link]
12 |
13 |
14 |
15 | # Vue DevTools Unlocker
16 | > A Chrome Extension that enables Vue DevTools in production environments.
17 |
18 | # Translations
19 |
20 | * [中文文档](README_zh.md)
21 |
22 | ## Features
23 |
24 | - 🔑 Unlocks Vue DevTools in production environments
25 | - 🌐 Works with both Vue 2 and Vue 3
26 | - 📦 Shows Vue version information
27 |
28 | ## Install
29 |
30 | [**Chrome** extension](https://chromewebstore.google.com/detail/vue-devtools-unlocker/fbihgkimpchlnlcnbffhbpcghafemopa)
31 |
32 | [**Edge** extension](https://microsoftedge.microsoft.com/addons/detail/vue-devtools-unlocker/lehadmjlbmlapdkapjoapbhhbcpcoepd)
33 |
34 | [**Firefox** extension](https://addons.mozilla.org/zh-CN/firefox/addon/vue-devtools-unlocker/)
35 |
36 | ## Usage
37 |
38 | 1. Install the extension from the Chrome Web Store
39 | 2. Visit any website using Vue.js in production
40 | 3. Open Chrome DevTools (F12 or right-click "Inspect")
41 | 4. Access the Vue panel in DevTools
42 |
43 | ## How It Works
44 |
45 | This extension modifies the Vue instance configuration to enable developer tools at runtime, even in production environments.
46 |
47 | ## Compatibility
48 |
49 | - Chrome 88+
50 | - Vue.js 2.x and 3.x
51 |
52 | ## Maintainers
53 |
54 | [@zhensherlock](https://github.com/zhensherlock).
55 |
56 | ## Contributing
57 |
58 | Feel free to dive in! [Open an issue](https://github.com/zhensherlock/vue-devtools-unlocker/issues/new/choose) or submit PRs.
59 |
60 | Standard Readme follows the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.
61 |
62 | ### Contributors
63 |
64 | This project exists thanks to all the people who contribute.
65 |
66 |
67 | 
68 |
69 |
70 | ## License
71 |
72 | [MIT](LICENSE) © MichaelSun
73 |
74 | [chrome-web-store-link]: https://chromewebstore.google.com/detail/vue-devtools-unlocker/fbihgkimpchlnlcnbffhbpcghafemopa
75 | [chrome-web-store-version]: https://img.shields.io/chrome-web-store/v/fbihgkimpchlnlcnbffhbpcghafemopa?color=1677FF&labelColor=black&logo=chromewebstore&logoColor=white&style=flat-square
76 | [chrome-web-store-size]: https://img.shields.io/chrome-web-store/size/fbihgkimpchlnlcnbffhbpcghafemopa?color=1677FF&labelColor=black&logo=chromewebstore&logoColor=white&style=flat-square
77 | [chrome-web-store-last-updated]: https://img.shields.io/chrome-web-store/last-updated/fbihgkimpchlnlcnbffhbpcghafemopa?color=1677FF&labelColor=black&logo=chromewebstore&logoColor=white&style=flat-square
78 | [github-action-build-link]: https://github.com/zhensherlock/vue-devtools-unlocker/actions/workflows/build.yml
79 | [github-action-build-shield]: https://img.shields.io/github/actions/workflow/status/zhensherlock/vue-devtools-unlocker/build.yml?branch=main&color=1677FF&label=build&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
80 | [github-license-link]: https://github.com/zhensherlock/vue-devtools-unlocker/blob/main/LICENSE
81 | [github-license-shield]: https://img.shields.io/github/license/zhensherlock/vue-devtools-unlocker?color=1677FF&labelColor=black&style=flat-square
82 |
--------------------------------------------------------------------------------
/README_zh.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | [![][chrome-web-store-version]][chrome-web-store-link]
8 | [![][chrome-web-store-size]][chrome-web-store-link]
9 | [![][chrome-web-store-last-updated]][chrome-web-store-link]
10 | [![][github-action-build-shield]][github-action-build-link]
11 | [![][github-license-shield]][github-license-link]
12 |
13 |
14 |
15 | # Vue DevTools Unlocker
16 | > 一个能够在生产环境中启用 Vue DevTools 的 Chrome 扩展。
17 |
18 | ## 功能特性
19 |
20 | - 🔑 在生产环境中解锁 Vue DevTools
21 | - 🌐 同时支持 Vue 2 和 Vue 3
22 | - 📦 显示 Vue 版本信息
23 |
24 | ## 安装
25 |
26 | [**Chrome** 扩展商店](https://chromewebstore.google.com/detail/vue-devtools-unlocker/fbihgkimpchlnlcnbffhbpcghafemopa)
27 |
28 | [**Edge** 扩展商店](https://microsoftedge.microsoft.com/addons/detail/vue-devtools-unlocker/lehadmjlbmlapdkapjoapbhhbcpcoepd)
29 |
30 | [**Firefox** 扩展商店](https://addons.mozilla.org/zh-CN/firefox/addon/vue-devtools-unlocker/)
31 |
32 | ## 使用方法
33 |
34 | 1. 从 Chrome 网上应用店安装扩展
35 | 2. 访问任何使用 Vue.js 的生产环境网站
36 | 3. 打开 Chrome DevTools (F12 或右键点击 "检查")
37 | 4. 在 DevTools 中查看 Vue 面板
38 |
39 | ## 工作原理
40 |
41 | 该扩展通过修改 Vue 实例的配置，在运行时启用开发者工具，即使在生产环境中也能正常工作。
42 |
43 | ## 兼容性
44 |
45 | - Chrome 88+
46 | - Vue.js 2.x 和 3.x
47 |
48 | ## 维护者
49 |
50 | [@zhensherlock](https://github.com/zhensherlock)。
51 |
52 | ## 如何贡献
53 |
54 | 非常欢迎你的加入！[提一个 Issue](https://github.com/zhensherlock/vue-devtools-unlocker/issues/new/choose) 或者提交一个 Pull Request。
55 |
56 | 标准 Readme 遵循 [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) 行为规范。
57 |
58 | ### 贡献者
59 |
60 | 感谢以下参与项目的人：
61 |
62 |
63 |
64 |
65 |
66 | ## 使用许可
67 |
68 | [MIT](LICENSE) © MichaelSun
69 |
70 | [chrome-web-store-link]: https://chromewebstore.google.com/detail/vue-devtools-unlocker/fbihgkimpchlnlcnbffhbpcghafemopa
71 | [chrome-web-store-version]: https://img.shields.io/chrome-web-store/v/fbihgkimpchlnlcnbffhbpcghafemopa?color=1677FF&labelColor=black&logo=chromewebstore&logoColor=white&style=flat-square
72 | [chrome-web-store-size]: https://img.shields.io/chrome-web-store/size/fbihgkimpchlnlcnbffhbpcghafemopa?color=1677FF&labelColor=black&logo=chromewebstore&logoColor=white&style=flat-square
73 | [chrome-web-store-last-updated]: https://img.shields.io/chrome-web-store/last-updated/fbihgkimpchlnlcnbffhbpcghafemopa?color=1677FF&labelColor=black&logo=chromewebstore&logoColor=white&style=flat-square
74 | [github-action-build-link]: https://github.com/zhensherlock/vue-devtools-unlocker/actions/workflows/build.yml
75 | [github-action-build-shield]: https://img.shields.io/github/actions/workflow/status/zhensherlock/vue-devtools-unlocker/build.yml?branch=main&color=1677FF&label=build&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
76 | [github-license-link]: https://github.com/zhensherlock/vue-devtools-unlocker/blob/main/LICENSE
77 | [github-license-shield]: https://img.shields.io/github/license/zhensherlock/vue-devtools-unlocker?color=1677FF&labelColor=black&style=flat-square
78 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | Have you found a security vulnerability? Please report it here: [zhensherlock@126.com](mailto:zhensherlock@126.com).
4 |
5 | Please provide as much details as possible: reproduction steps, screenshots, GIFs, etc.
6 |
7 | Thanks for keeping everyone safe!
8 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: ['@commitlint/config-conventional'],
3 | rules: {
4 | // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
5 | 'type-enum': [
6 | 2,
7 | 'always',
8 | [
9 | 'feat', // 新功能
10 | 'fix', // 修复
11 | 'docs', // 文档变更
12 | 'style', // 代码格式
13 | 'refactor', // 重构
14 | 'perf', // 性能优化
15 | 'test', // 增加测试
16 | 'build', // 构建
17 | 'ci', // CI配置
18 | 'chore', // 构建过程或辅助工具的变动
19 | 'revert', // 回退
20 | 'build', // 打包
21 | 'release', // 发版
22 | ],
23 | ],
24 | // subject 大小写不做校验
25 | 'subject-case': [0],
26 | },
27 | }
28 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | // import tseslint from 'typescript-eslint';
2 | // import prettierPlugin from 'eslint-plugin-prettier';
3 | const tseslint = require('typescript-eslint');
4 | const prettierPlugin = require('eslint-plugin-prettier');
5 |
6 | module.exports = [
7 | // 应用 TypeScript ESLint 推荐配置
8 | ...tseslint.configs.recommended,
9 |
10 | {
11 | ignores: ['node_modules/**', 'build/**', 'release/**', '**/*.json', '**/*.html', '**/*.css', '**/*.js'],
12 | },
13 |
14 | {
15 | files: ['packages/shared/**/*.{js,ts}'],
16 | ignores: ['config/**/*.{js,ts}'],
17 | },
18 |
19 | // 全局配置
20 | {
21 | files: ['packages/**/*.{js,ts}'],
22 |
23 | languageOptions: {
24 | ecmaVersion: 2020,
25 | sourceType: 'module',
26 | parserOptions: {
27 | ecmaVersion: 2020,
28 | sourceType: 'module',
29 | },
30 | globals: {
31 | // 浏览器环境
32 | window: 'readonly',
33 | document: 'readonly',
34 | navigator: 'readonly',
35 | // Chrome 扩展 API
36 | chrome: 'readonly',
37 | },
38 | },
39 |
40 | rules: {
41 | 'prettier/prettier': 'error',
42 | '@typescript-eslint/explicit-function-return-type': 'off',
43 | '@typescript-eslint/no-explicit-any': 'warn',
44 | '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
45 | 'no-console': ['warn', { allow: ['warn', 'error'] }],
46 | },
47 |
48 | plugins: {
49 | prettier: prettierPlugin,
50 | },
51 | },
52 | ];
53 |
--------------------------------------------------------------------------------
/lint-staged.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 'packages/**/*.{ts,js}': ['npx eslint'],
3 | }
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-devtools-unlocker",
3 | "version": "1.0.0",
4 | "description": "Enable Vue DevTools in production environments",
5 | "author": "zhensherlock",
6 | "license": "MIT",
7 | "scripts": {
8 | "dev": "pnpm -r --aggregate-output --filter=./packages/* watch",
9 | "dev:shared": "pnpm -r --aggregate-output --filter=./packages/shared watch",
10 | "dev:chrome": "pnpm -r --aggregate-output --filter=./packages/chrome-extension watch",
11 | "dev:firefox": "pnpm -r --aggregate-output --filter=./packages/firefox-extension watch",
12 | "build": "pnpm -r --aggregate-output --filter=./packages/* build",
13 | "build:shared": "pnpm -r --aggregate-output --filter=./packages/shared build",
14 | "build:chrome": "pnpm -r --aggregate-output --filter=./packages/chrome-extension build",
15 | "build:firefox": "pnpm -r --aggregate-output --filter=./packages/firefox-extension build",
16 | "pack": "pnpm -r --aggregate-output --filter=./packages/* build:zip",
17 | "pack:chrome": "pnpm -r --aggregate-output --filter=./packages/chrome-extension build:zip",
18 | "pack:firefox": "pnpm -r --aggregate-output --filter=./packages/firefox-extension build:zip",
19 | "prepare": "husky"
20 | },
21 | "repository": {
22 | "type": "git",
23 | "url": "git+https://github.com/zhensherlock/vue-devtools-unlocker.git"
24 | },
25 | "bugs": {
26 | "url": "https://github.com/zhensherlock/vue-devtools-unlocker/issues"
27 | },
28 | "devDependencies": {
29 | "@commitlint/cli": "^19.8.1",
30 | "@commitlint/config-conventional": "^19.8.1",
31 | "@types/chrome": "^0.0.326",
32 | "@typescript-eslint/parser": "^8.32.1",
33 | "adm-zip": "^0.5.16",
34 | "copy-webpack-plugin": "^13.0.0",
35 | "css-loader": "^7.1.2",
36 | "eslint": "^9.26.0",
37 | "eslint-plugin-prettier": "^5.4.0",
38 | "file-loader": "^6.2.0",
39 | "husky": "^9.1.7",
40 | "mini-css-extract-plugin": "^2.9.2",
41 | "prettier": "^3.5.3",
42 | "rimraf": "^6.0.1",
43 | "sass": "^1.88.0",
44 | "sass-loader": "^16.0.5",
45 | "terser-webpack-plugin": "^5.3.14",
46 | "ts-loader": "^9.5.2",
47 | "typescript": "^5.8.3",
48 | "typescript-eslint": "^8.32.1",
49 | "webpack": "^5.99.8",
50 | "webpack-cli": "^6.0.1",
51 | "webpack-merge": "^6.0.1"
52 | },
53 | "engines": {
54 | "node": ">=22.0.0"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/packages/chrome-extension/config/pack.js:
--------------------------------------------------------------------------------
1 | import { readFileSync, existsSync, mkdirSync } from 'fs';
2 | import { dirname, resolve } from 'path';
3 | import AdmZip from 'adm-zip';
4 | import { fileURLToPath } from 'url';
5 |
6 | const __filename = fileURLToPath(import.meta.url);
7 | const __dirname = dirname(__filename);
8 |
9 | try {
10 | const { version, name } = JSON.parse(readFileSync(resolve(__dirname, '../build', 'manifest.json'), 'utf8'));
11 |
12 | const outdir = 'release';
13 | const filename = `${name}-chrome-v${version}.zip`;
14 | const zip = new AdmZip();
15 | zip.addLocalFolder('build');
16 | if (!existsSync(outdir)) {
17 | mkdirSync(outdir);
18 | }
19 | zip.writeZip(`${outdir}/${filename}`);
20 |
21 | console.log(`Success! Created a ${filename} file under ${outdir} directory. You can upload this file to web store.`);
22 | } catch (e) {
23 | console.error('Error! Failed to generate a zip file.', e);
24 | }
25 |
--------------------------------------------------------------------------------
/packages/chrome-extension/config/paths.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import { fileURLToPath } from 'url';
3 | import { dirname } from 'path';
4 |
5 | const __filename = fileURLToPath(import.meta.url);
6 | const __dirname = dirname(__filename);
7 |
8 | const PATHS = {
9 | src: path.resolve(__dirname, '../src'),
10 | build: path.resolve(__dirname, '../build'),
11 | };
12 |
13 | export default PATHS;
14 |
--------------------------------------------------------------------------------
/packages/chrome-extension/config/webpack.common.js:
--------------------------------------------------------------------------------
1 | import CopyWebpackPlugin from 'copy-webpack-plugin';
2 | import MiniCssExtractPlugin from 'mini-css-extract-plugin';
3 |
4 | import PATHS from './paths.js';
5 |
6 | // used in the module rules and in the stats exlude list
7 | const IMAGE_TYPES = /\.(png|jpe?g|gif|svg)$/i;
8 |
9 | // To re-use webpack configuration across templates,
10 | // CLI maintains a common webpack configuration file - `webpack.common.js`.
11 | // Whenever user creates an extension, CLI adds `webpack.common.js` file
12 | // in template's `config` folder
13 | const common = {
14 | output: {
15 | // the build folder to output bundles and assets in.
16 | path: PATHS.build,
17 | // the filename template for entry chunks
18 | filename: '[name].js',
19 | clean: true,
20 | },
21 | stats: {
22 | all: false,
23 | errors: true,
24 | builtAt: true,
25 | assets: true,
26 | excludeAssets: [IMAGE_TYPES],
27 | },
28 | module: {
29 | rules: [
30 | // Check for TypeScript files
31 | {
32 | test: /\.ts$/,
33 | use: ['ts-loader'],
34 | },
35 | // Help webpack in understanding CSS files imported in .js files
36 | {
37 | test: /\.(css|scss|sass)$/,
38 | use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
39 | },
40 | // Check for images imported in .js files and
41 | {
42 | test: IMAGE_TYPES,
43 | use: [
44 | {
45 | loader: 'file-loader',
46 | options: {
47 | outputPath: 'images',
48 | name: '[name].[ext]',
49 | },
50 | },
51 | ],
52 | },
53 | ],
54 | },
55 | resolve: {
56 | alias: {
57 | '@': PATHS.src,
58 | },
59 | // Help webpack resolve these extensions in order
60 | extensions: ['.ts', '.js'],
61 | },
62 | plugins: [
63 | // Copy static assets from `public` folder to `build` folder
64 | new CopyWebpackPlugin({
65 | patterns: [
66 | {
67 | from: 'chrome-manifest.json',
68 | to: 'manifest.json',
69 | context: '../../public',
70 | },
71 | {
72 | from: '**/*',
73 | context: '../../public',
74 | globOptions: {
75 | ignore: ['**/firefox-manifest.json', '**/chrome-manifest.json'],
76 | },
77 | },
78 | ],
79 | }),
80 | // Extract CSS into separate files
81 | new MiniCssExtractPlugin({
82 | filename: '[name].css',
83 | }),
84 | ],
85 | };
86 |
87 | export default common;
88 |
--------------------------------------------------------------------------------
/packages/chrome-extension/config/webpack.config.js:
--------------------------------------------------------------------------------
1 | import TerserPlugin from 'terser-webpack-plugin';
2 | import { merge } from 'webpack-merge';
3 | import common from './webpack.common.js';
4 | import PATHS from './paths.js';
5 |
6 | // Merge webpack configuration files
7 | const config = (env, argv) => {
8 | const isProduction = argv.mode === 'production';
9 | return merge(common, {
10 | entry: {
11 | popup: PATHS.src + '/popup.ts',
12 | contentScript: PATHS.src + '/contentScript.ts',
13 | background: PATHS.src + '/background.ts',
14 | injectedScript: PATHS.src + '/injectedScript.ts',
15 | options: PATHS.src + '/options.ts',
16 | },
17 | devtool: isProduction ? false : 'source-map',
18 | optimization: {
19 | minimize: isProduction,
20 | minimizer: [
21 | new TerserPlugin({
22 | terserOptions: {
23 | compress: {
24 | drop_console: true,
25 | },
26 | },
27 | }),
28 | ],
29 | },
30 | });
31 | };
32 |
33 | export default config;
34 |
--------------------------------------------------------------------------------
/packages/chrome-extension/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue-devtools-unlocker/chrome-extension",
3 | "version": "1.1.0",
4 | "description": "Enable Vue DevTools in production environments in Chrome browser",
5 | "type": "module",
6 | "scripts": {
7 | "clean": "rimraf build",
8 | "watch": "webpack --mode=development --watch --config config/webpack.config.js",
9 | "build": "npm run clean && webpack --mode=production --config config/webpack.config.js",
10 | "build:zip": "npm run build && node ./config/pack.js",
11 | "format": "prettier --write --ignore-unknown \"{config,public,src}/**/*.{html,css,js,ts,json}\"",
12 | "lint": "eslint --ext .ts,.js src/",
13 | "lint:fix": "eslint --ext .ts,.js src/ --fix"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/zhensherlock/vue-devtools-unlocker.git"
18 | },
19 | "bugs": {
20 | "url": "https://github.com/zhensherlock/vue-devtools-unlocker/issues"
21 | },
22 | "dependencies": {
23 | "@vue-devtools-unlocker/shared": "workspace:^"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/chrome-extension/src/background.ts:
--------------------------------------------------------------------------------
1 | import { checkAllowedStatus } from '@vue-devtools-unlocker/shared';
2 |
3 | // Store Vue DevTools unlock status for each tab
4 | const tabStatus: Record = {};
5 |
6 | // Listen for messages from content script
7 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
8 | if (message.type === 'VueDevtoolsStatus' && sender.tab?.id) {
9 | // Store unlock status for current tab
10 | tabStatus[sender.tab.id] = message.payload;
11 | console.log(tabStatus);
12 | sendResponse({ success: true });
13 | }
14 | });
15 |
16 | // Listen for popup open event
17 | chrome.runtime.onConnect.addListener((port) => {
18 | if (port.name === 'popup') {
19 | port.postMessage({
20 | type: 'VueDevtoolsStatus',
21 | payload: {
22 | loading: true,
23 | },
24 | });
25 | // When popup connects, query the current active tab
26 | chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
27 | if (tabs[0] && tabs[0].id) {
28 | const tabId = tabs[0].id;
29 | let retryCount = 0;
30 | const MAX_RETRIES = 5; // (5 * 500ms = 2500ms)
31 |
32 | const checkStatus = () => {
33 | if (tabStatus[tabId]) {
34 | port.postMessage({
35 | type: 'VueDevtoolsStatus',
36 | payload: tabStatus[tabId],
37 | });
38 | } else if (retryCount < MAX_RETRIES) {
39 | retryCount++;
40 | setTimeout(checkStatus, 500);
41 | } else {
42 | // 超时后发送错误状态
43 | port.postMessage({
44 | type: 'VueDevtoolsStatus',
45 | payload: {
46 | success: false,
47 | message: 'Unable to detect Vue application status. Please refresh the page and try again.',
48 | },
49 | });
50 | }
51 | };
52 |
53 | checkStatus();
54 | }
55 | });
56 | }
57 | });
58 |
59 | chrome.tabs.onRemoved.addListener((tabId) => {
60 | delete tabStatus[tabId];
61 | });
62 |
63 | chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
64 | delete tabStatus[tabId];
65 | if (changeInfo.status === 'complete' && tab.url) {
66 | checkAllowedStatus(tabId, tab.url);
67 | }
68 | });
69 |
--------------------------------------------------------------------------------
/packages/chrome-extension/src/contentScript.ts:
--------------------------------------------------------------------------------
1 | import { injectScriptFile } from '@vue-devtools-unlocker/shared';
2 |
3 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
4 | if (message.type === 'CheckIsAllowed' && message.isAllowed) {
5 | injectScriptFile('injectedScript.js');
6 | window.addEventListener('message', (event) => {
7 | if (event.data?.source === 'vue-devtools-unlocker') {
8 | chrome.runtime.sendMessage(event.data);
9 | }
10 | });
11 |
12 | sendResponse({ success: true });
13 | } else {
14 | chrome.runtime.sendMessage({
15 | source: 'vue-devtools-unlocker',
16 | type: 'VueDevtoolsStatus',
17 | payload: {
18 | success: false,
19 | isNotAllowed: true,
20 | message: 'This page is not allowed to use Vue DevTools.',
21 | },
22 | });
23 | }
24 | });
25 |
--------------------------------------------------------------------------------
/packages/chrome-extension/src/injectedScript.ts:
--------------------------------------------------------------------------------
1 | import { getVueInstanceWithRetry, unlockVueDevTools } from '@vue-devtools-unlocker/shared';
2 |
3 | const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
4 |
5 | const postMessageToExtension = (type: string = 'VueDevtoolsMessage', payload: unknown) => {
6 | window.postMessage(
7 | {
8 | source: 'vue-devtools-unlocker',
9 | type,
10 | payload,
11 | },
12 | '*'
13 | );
14 | };
15 |
16 | if (devtools) {
17 | const version = window.__VUE__ ? 3 : 2;
18 |
19 | getVueInstanceWithRetry(version).then((instance) => {
20 | if (instance) {
21 | const { vueVersion } = unlockVueDevTools(devtools, version, instance);
22 | postMessageToExtension('VueDevtoolsStatus', {
23 | success: true,
24 | message: 'Vue DevTools unlocked successfully.',
25 | vueVersion,
26 | });
27 | } else {
28 | postMessageToExtension('VueDevtoolsStatus', {
29 | success: false,
30 | message: 'Vue instance not found.',
31 | });
32 | }
33 | });
34 | } else {
35 | postMessageToExtension('VueDevtoolsStatus', {
36 | success: false,
37 | message: 'Vue DevTools not found.',
38 | });
39 | }
40 |
--------------------------------------------------------------------------------
/packages/chrome-extension/src/options.scss:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | :root {
10 | --primary-color: #42b883;
11 | --secondary-color: #35495e;
12 | --background-color: #f8f8f8;
13 | --text-color: #2c3e50;
14 | --border-color: #e0e0e0;
15 | --success-color: #42b883;
16 | --error-color: #ff5252;
17 | }
18 |
19 | html {
20 | font-family:
21 | -apple-system,
22 | BlinkMacSystemFont,
23 | Segoe UI,
24 | Helvetica,
25 | Arial,
26 | sans-serif;
27 | }
28 |
29 | body {
30 | width: 400px;
31 | color: var(--text-color);
32 | }
33 |
34 | .container {
35 | background: #fff;
36 | padding: 20px;
37 | border-radius: 8px;
38 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
39 | }
40 |
41 | h1 {
42 | color: var(--secondary-color);
43 | margin-bottom: 20px;
44 | }
45 |
46 | main {
47 | margin-bottom: 20px;
48 |
49 | label {
50 | display: block;
51 | margin-bottom: 10px;
52 | color: var(--text-color);
53 | }
54 |
55 | textarea {
56 | width: 100%;
57 | height: 150px;
58 | padding: 10px;
59 | border: 1px solid var(--border-color);
60 | border-radius: 4px;
61 | font-family: monospace;
62 | resize: none;
63 | }
64 |
65 | .help-text {
66 | font-size: 12px;
67 | color: #666;
68 | margin-top: 5px;
69 | }
70 | }
71 |
72 | button {
73 | background: var(--primary-color);
74 | color: #fff;
75 | border: none;
76 | padding: 8px 16px;
77 | border-radius: 4px;
78 | cursor: pointer;
79 |
80 | &:hover {
81 | background: #3aa876;
82 | }
83 | }
84 |
85 |
--------------------------------------------------------------------------------
/packages/chrome-extension/src/options.ts:
--------------------------------------------------------------------------------
1 | import { getAllowedSites, setAllowedSites } from '@vue-devtools-unlocker/shared';
2 | import '@/options.scss';
3 |
4 | document.addEventListener('DOMContentLoaded', () => {
5 | const textarea = document.getElementById('allowedSites') as HTMLTextAreaElement;
6 | const saveButton = document.getElementById('save') as HTMLButtonElement;
7 |
8 | // Load saved settings
9 | getAllowedSites((text) => {
10 | textarea.value = text;
11 | });
12 |
13 | // Save settings
14 | saveButton.addEventListener('click', () => {
15 | const sites = textarea.value
16 | .split('\n')
17 | .map((site) => site.trim())
18 | .filter((site) => site.length > 0);
19 |
20 | setAllowedSites(sites, () => {
21 | saveButton.textContent = 'Saved!';
22 | setTimeout(() => {
23 | saveButton.textContent = 'Save Settings';
24 | }, 2000);
25 | });
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/packages/chrome-extension/src/popup.scss:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | :root {
10 | --primary-color: #42b883;
11 | --secondary-color: #35495e;
12 | --background-color: #f8f8f8;
13 | --text-color: #2c3e50;
14 | --border-color: #e0e0e0;
15 | --success-color: #42b883;
16 | --error-color: #ff5252;
17 | }
18 |
19 | html {
20 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
21 | }
22 |
23 | body {
24 | width: 300px;
25 | color: var(--text-color);
26 | }
27 |
28 | .container {
29 | display: flex;
30 | flex-direction: column;
31 | background-color: var(--background-color);
32 | overflow: hidden;
33 | }
34 |
35 | header {
36 | display: flex;
37 | align-items: center;
38 | padding: 12px 16px;
39 | background-color: white;
40 | color: var(--secondary-color);
41 | border-bottom: 1px solid var(--border-color);
42 |
43 | h1 {
44 | font-size: 16px;
45 | font-weight: 600;
46 | }
47 |
48 | .logo {
49 | width: 24px;
50 | height: 24px;
51 | margin-right: 10px;
52 | }
53 | }
54 |
55 | main {
56 | flex: 1;
57 | padding: 16px;
58 |
59 | .status-container {
60 | padding: 12px;
61 | border-radius: 6px;
62 | font-size: 14px;
63 | line-height: 1.5;
64 | background-color: white;
65 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
66 | border: 1px solid var(--border-color);
67 |
68 | h3 {
69 | margin-bottom: 8px;
70 | }
71 | }
72 |
73 | .status-success {
74 | border-left: 4px solid var(--success-color);
75 |
76 | h3 {
77 | color: var(--success-color);
78 | }
79 | }
80 |
81 | .status-error {
82 | border-left: 4px solid var(--error-color);
83 |
84 | h3 {
85 | color: var(--error-color);
86 | }
87 | }
88 |
89 | .loading {
90 | display: flex;
91 | align-items: center;
92 | gap: 10px;
93 | }
94 |
95 | .version-info {
96 | margin-top: 8px;
97 |
98 | .version-tag {
99 | display: inline-block;
100 | padding: 2px 6px;
101 | background-color: var(--primary-color);
102 | color: white;
103 | border-radius: 4px;
104 | font-size: 12px;
105 | margin-left: 6px;
106 | }
107 | }
108 |
109 | .guide-text {
110 | margin-top: 8px;
111 | font-size: 12px;
112 | color: #666;
113 | }
114 |
115 | .guide-steps {
116 | margin-top: 4px;
117 | padding-left: 20px;
118 | }
119 |
120 | .spinner {
121 | width: 16px;
122 | height: 16px;
123 | border: 2px solid rgba(66, 184, 131, 0.2);
124 | border-top-color: var(--primary-color);
125 | border-radius: 50%;
126 | animation: spin 1s linear infinite;
127 | }
128 |
129 | @keyframes spin {
130 | to {
131 | transform: rotate(360deg);
132 | }
133 | }
134 | }
135 |
136 | footer {
137 | padding: 10px 16px;
138 | text-align: center;
139 | font-size: 12px;
140 | border-top: 1px solid var(--border-color);
141 | display: flex;
142 | justify-content: center;
143 | gap: 16px;
144 |
145 | .github-link, .settings-link {
146 | color: var(--secondary-color);
147 | text-decoration: none;
148 | display: inline-flex;
149 | align-items: center;
150 | gap: 4px;
151 | }
152 |
153 | .github-link:hover, .settings-link:hover {
154 | text-decoration: underline;
155 | }
156 | }
157 |
--------------------------------------------------------------------------------
/packages/chrome-extension/src/popup.ts:
--------------------------------------------------------------------------------
1 | import '@/popup.scss';
2 |
3 | (function () {
4 | // Connect to background script
5 | const port = chrome.runtime.connect({ name: 'popup' });
6 |
7 | // Connect to background script
8 | port.onMessage.addListener((message) => {
9 | if (message.type === 'VueDevtoolsStatus') {
10 | const data = message.payload;
11 |
12 | const statusElement = document.getElementById('status');
13 | if (!statusElement) {
14 | return;
15 | }
16 | if (data.loading) {
17 | statusElement.className = 'status-container';
18 | statusElement.innerHTML = `
19 |
20 |
21 |
Checking Vue DevTools status...
22 |
29 |
✅ Unlocked Successfully
30 |
Vue DevTools has been successfully unlocked!
31 |
32 | Vue Version: ${data.vueVersion || 'Unknown'}
33 |
34 |
39 |
❌ Unlock Failed
40 |
${data.message || 'Unknown error'}
41 | ${
42 | data.isNotAllowed
43 | ? `
44 |
45 | To enable Vue DevTools on this page:
46 |
47 | - Click the "Settings" button below
48 | - Add this website to the allowed sites list
49 | - Refresh this page
50 |
51 | `
52 | : ''
53 | }
54 |
20 |
21 |
Checking Vue DevTools status...
22 |
29 |
✅ Unlocked Successfully
30 |
Vue DevTools has been successfully unlocked!
31 |
32 | Vue Version: ${data.vueVersion || 'Unknown'}
33 |
34 |
39 |
❌ Unlock Failed
40 |
${data.message || 'Unknown error'}
41 | ${
42 | data.isNotAllowed
43 | ? `
44 |
45 | To enable Vue DevTools on this page:
46 |
47 | - Click the "Settings" button below
48 | - Add this website to the allowed sites list
49 | - Refresh this page
50 |
51 | `
52 | : ''
53 | }
54 |
10 |
13 |
14 |
15 |
16 | Enter the URLs or patterns where you want to enable Vue Devtools. Use * for wildcards. Example: *.example.com
17 |
18 |
21 |
10 |
11 | 
12 | Vue Devtools Unlocker
13 |
14 |
15 |
16 |
17 |
18 |
Checking Vue DevTools status...
19 |
20 |
22 |
26 |