51 |
52 | 翻译页面-通过中英文对照的形式阅读，在快速阅读页面的同时，也很好的解决了目前市面上翻译软件对专业词汇翻译不准确的问题。
53 |
54 | 可以通过快捷键 `Ctrl+Shift+E`/`Command+Shift+E` 快速翻译当前页面。
55 |
56 | 
57 |
58 | 划词翻译、右键菜单翻译,这两天加上
59 |
60 | ### 优化浏览器中自带的翻译页面
61 |
62 | 所有站点过滤掉代码块等不需要翻译的元素，为 github 定制化过滤了不需要翻译的元素
63 |
64 | 优化浏览器中自带的翻译，标记了一些不该被翻译的元素（比如代码块，github 中一些导航），让浏览器自带的翻译在翻译页面时跳过被标记的标签。
65 |
66 | 
67 |
68 | ### github 添加在线编辑按钮
69 |
70 | github 添加在线编辑按钮并且可以使用快捷键 ","直接进入。 方便快速使用 `1s` 查看代码，（为什么？因为 1s 比 通过 github 页面中快捷键"句号"调出的 github.dev 要快）。
71 |
72 | 
73 |
74 | ### 去除外链跳转的提示
75 |
76 | 每次在知乎，掘金，简书...中打开外链，都有一个跳转提示，需要手动点击确定才能跳转，很难受，这里捕获后直接重定向到目标链接。
77 |
78 | 
79 |
80 | ### 清除用户事件的限制
81 |
82 | 在一些网站中 copy 文本后常常后面附带一些版权信息等，很烦,清除了网站对用户行为进行了限制（比如右击菜单，选择文本，拷贝，剪切，键盘鼠标事件等）
83 |
84 | 
85 |
86 | ## 开发
87 |
88 | ### 运行
89 |
90 | 首先，运行服务：
91 |
92 | ```bash
93 | npm run dev
94 | # or
95 | pnpm dev
96 | ```
97 |
98 | 打开浏览器并加载适当的开发构建。例如，如果你正在为 chrome 浏览器开发，使用 manifest v3，使用:`build/chrome-mv3-dev`。
99 |
100 | 
101 |
102 | 你可以通过修改 `popup.tsx` 开始编辑弹出窗口。它应该在您进行更改时自动更新。要添加选项页面，只需添加一个 `options.tsx` 文件到项目的根，并导出一个默认的 react 组件。同样，要添加内容页，请添加 `content.ts` 文件到项目根目录，导入一些模块并执行一些逻辑，然后在浏览器上重新加载扩展。
103 |
104 | 进一步指导 👉🏻[plasmo docs](https://docs.plasmo.com/)
105 |
106 | ### 打包成 crx 文件
107 |
108 | 运行以下:
109 |
110 | ```sh
111 | npm run build
112 | # or
113 | pnpm build
114 | ```
115 |
116 | 这将为您的扩展创建一个生产包，准备压缩并发布到商店。
117 |
118 | ### 提交到网上商店
119 |
120 | 部署 plasmo 扩展最简单的方法是使用内置的[bpp](https://bpp.browser.market) GitHub action 。但是，在使用此操作之前，请确保构建您的扩展并将第一个版本上传到存储中以建立基本凭证。然后，只需遵循 [此设置说明](https://docs.plasmo.com/workflows/submit)，您就可以自动提交了!
121 |
122 | ## 赞赏
123 |
124 | 只需要点一个 Star⭐️ 支持我们~
125 |
126 | 🌸Let's enjoy it!
127 |
--------------------------------------------------------------------------------
/RECORD.md:
--------------------------------------------------------------------------------
1 | # 基于 Plasmo 搭建浏览器插件
2 |
3 | ## 创建项目
4 |
5 | ```bash
6 | pnpm create plasmo --with-src
7 | # or
8 | npx init-plasmo --with-src
9 | ```
10 |
11 | ## 右键菜单
12 |
13 |
14 |
15 | ## 快捷键
16 |
17 |
18 |
19 | ## content-scripts
20 |
21 | 是 Chrome 插件中向页面注入脚本的一种形式。 content-scripts 能访问 DOM，但 不能访问绝大部分 `chrome.xxx.api`。
22 |
23 | 在 content-script 中的 CSS，用图片的方式
24 |
25 | 1 在 Mainfast 中，将图片的路径设置在访问的插件资源列表中，例如
26 |
27 | ```
28 | "web_accessible_resources": ["images/*"],
29 | ```
30 |
31 | 2 CSS 中用 `url(chrome-extension://__MSG_@@extension_id__/图片的路径)` 来写。如:
32 |
33 | ```
34 | background-image: url(chrome-extension://__MSG_@@extension_id__/images/xx.png)
35 | ```
36 |
37 | 当然，也可用 base64 的方式来做。
38 |
39 | ## 动态注入资源
40 |
41 | ### 注入 JS
42 |
43 | bacground 和 popup 的 js 不能直接访问 DOM。当通过在 bacground 或 popup 中 注入 js，动态注入的 js 可以访问 DOM。
44 |
45 | ```
46 | // 注入文件
47 | chrome.tabs.executeScript(null, {
48 | file: "路径"
49 | })
50 |
51 | // 注入代码
52 | chrome.tabs.executeScript(null, {
53 | code: 'document.body.style.backgroundColor="red"'
54 | })
55 | ```
56 |
57 | 需要在 `manifest.json` 中配置对应的配置：
58 |
59 | ```
60 | "permissions": [ "tabs", "activeTab", "18 | our answer could be improved with additional supporting information. Please edit to add 19 | further details, such as citations or documentation, so that others can confirm that your 20 | answer is correct. You can find more information on how to write good answers in the help 21 | center. – Community Bot 22 |
23 |q50 | 、 51 | cite 52 | 、 53 | abbr 54 | 、 55 | dfn 56 | 、 57 | 58 | 、 59 | var 60 | 、 61 | samp 62 | 、 63 | kbd 64 | 、 65 | i 66 | 、 67 | b 68 | 、 69 | span 70 | The expectation is that these tags will not be understood as a node alone, but together with 71 | the parent node. 72 | 73 |
82 | this is a 83 | p 84 | element 85 |
86 |127 |138 |128 | const test = 'test'; 129 | console.log(test); 130 |131 |132 | const a = 123; 133 | function test (){ 134 | let b=333; 135 | } 136 |137 |
| Test | 143 |Test | 144 |Test | 145 |
|---|---|---|
| Test | 150 |Test | 151 |Test | 152 |
4 | 使用快捷键 Alt+Q 快速切换该面板 5 | 10 | Github 🌸 11 | 12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /src/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import { Radio } from 'antd' 2 | 3 | interface Props { 4 | active: string 5 | setActive: (active: string) => void 6 | pages: { key: string; name: string }[] 7 | } 8 | 9 | export default function Header({ active, setActive, pages }: Props) { 10 | return ( 11 |17 | 插件使用 Plasmo 开发 18 |
19 |