-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathoptions.html
More file actions
163 lines (150 loc) · 9.91 KB
/
Copy pathoptions.html
File metadata and controls
163 lines (150 loc) · 9.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PagePatch</title>
<link rel="icon" type="image/png" href="icons/icon-32.png">
<link rel="stylesheet" href="options.css">
</head>
<body>
<header class="topbar">
<div>
<h1 id="theme-toggle" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="toggleThemeAria" aria-label="切换明暗主题">PagePatch</h1>
<p class="subtitle" data-i18n="subtitle">为指定页面添加自定义样式和脚本。</p>
</div>
<div class="topbar-actions">
<div id="language-switch" class="language-switch" role="group" data-i18n-aria-label="languageSwitchAria" aria-label="界面语言">
<button class="language-button" type="button" data-language="zh" aria-pressed="false">中文</button>
<button class="language-button" type="button" data-language="en" aria-pressed="false">EN</button>
</div>
</div>
</header>
<main class="workspace">
<aside class="sidebar" data-i18n-aria-label="ruleListAria" aria-label="规则列表">
<div class="sidebar-heading">
<h2 data-i18n="rules">规则</h2>
<span id="rule-count" class="count">0</span>
<input id="rule-filter" class="rule-filter" type="search" data-i18n-placeholder="filterPlaceholder" data-i18n-aria-label="filterAria" placeholder="筛选" aria-label="按名称或 URL 筛选规则" autocomplete="off">
<button id="new-rule" class="sidebar-add-button" type="button" data-i18n-aria-label="newRuleAria" aria-label="新建规则">＋</button>
</div>
<div id="rule-list" class="rule-list"></div>
<div id="empty-list" class="empty-list">
<span class="empty-icon">{ }</span>
<p id="empty-title" data-i18n="emptyNoRulesTitle">还没有规则</p>
<small id="empty-description" data-i18n="emptyNoRulesDescription">新建一条规则开始自定义网页</small>
</div>
</aside>
<section class="editor-panel">
<div id="user-scripts-notice" class="notice" hidden>
<div>
<strong data-i18n="userScriptsUnavailableTitle">JS 功能尚未开启</strong>
<span data-i18n="userScriptsUnavailableDescription">请在扩展详情中开启“允许用户脚本”，然后重新加载本页。</span>
</div>
<button id="open-extension-details" class="notice-button" type="button" data-i18n="openExtensionDetails">打开扩展详情</button>
</div>
<div id="welcome" class="welcome">
<div class="welcome-mark">{ }</div>
<h2 data-i18n="welcomeTitle">选择或新建规则</h2>
<p data-i18n="welcomeDescription">样式和脚本会在匹配页面加载后自动注入。</p>
</div>
<form id="rule-form" class="rule-form" hidden novalidate>
<div id="editor-heading" class="editor-heading" hidden>
<div class="editor-name-row">
<h2 id="editor-title"></h2>
<button id="edit-rule-name" class="edit-rule-name" type="button" data-i18n-aria-label="editRuleNameAria" aria-label="修改规则名称">
<span class="pen-icon" aria-hidden="true">✎</span>
</button>
<input id="rule-name-editor" class="rule-name-input" type="text" maxlength="80" data-i18n-placeholder="ruleNamePlaceholder" placeholder="留空则使用页面域名" autocomplete="off" hidden>
</div>
</div>
<label class="field">
<span class="field-label" data-i18n="pageUrlLabel">页面 URL</span>
<input id="match" type="text" spellcheck="false" placeholder="https://example.com/*" autocomplete="off">
<span class="field-help"><span data-i18n="matchHelp">Chrome 匹配格式，例如</span> <code>https://example.com/*</code>、<code>*://*.example.com/*</code></span>
<span id="match-error" class="field-error"></span>
</label>
<div class="content-grid">
<section class="content-section" aria-labelledby="css-section-title">
<div class="content-heading">
<span class="content-badge css-badge">CSS</span>
<h3 id="css-section-title" data-i18n="stylesSection">页面样式</h3>
</div>
<div class="field compact-field link-field">
<span class="field-label with-help">
<span data-i18n="cssLinksLabel">CSS 链接</span>
<span class="help-tooltip" role="note" tabindex="0" data-i18n-aria-label="cssLinksHelpAria" aria-label="查看 CSS 链接帮助">
<span aria-hidden="true">?</span>
<span class="help-tooltip-content" role="tooltip" data-i18n="cssLinksHelp">CSS 链接必须返回可作为样式表加载的内容，并提供正确的 Content-Type: text/css 响应头。</span>
</span>
</span>
<div id="css-url-list" class="url-list"></div>
<button id="add-css-url" class="add-link-button" type="button" data-i18n="addCssLink">＋ 添加 CSS 链接</button>
</div>
<label class="field compact-field code-field">
<span class="field-label with-help">
<span data-i18n="customCssLabel">自定义 CSS</span>
<span class="help-tooltip" role="note" tabindex="0" data-i18n-aria-label="customCssHelpAria" aria-label="查看自定义 CSS 帮助">
<span aria-hidden="true">?</span>
<span class="help-tooltip-content" role="tooltip" data-i18n="customCssHelp">此处填写的 CSS 会通过 Chrome 的样式注入接口作为样式表应用到匹配页面。</span>
</span>
</span>
<textarea id="css" spellcheck="false" placeholder="body { background: #111; color: #eee; }"></textarea>
<span id="css-error" class="field-error"></span>
</label>
</section>
<section class="content-section" aria-labelledby="js-section-title">
<div class="content-heading">
<span class="content-badge js-badge">JS</span>
<h3 id="js-section-title" data-i18n="scriptsSection">页面脚本</h3>
<button id="js-world-toggle" class="script-world-toggle" type="button" data-world="USER_SCRIPT" aria-pressed="false" aria-label="当前为隔离环境，点击切换到页面环境">
<span id="js-world-isolated-label" class="script-world-option">隔离环境</span>
<span id="js-world-main-label" class="script-world-option">页面环境</span>
</button>
<span class="help-tooltip script-world-help" role="note" tabindex="0" data-i18n-aria-label="jsWorldHelpAria" aria-label="查看脚本执行环境帮助">
<span aria-hidden="true">?</span>
<span class="help-tooltip-content" role="tooltip" data-i18n="jsWorldHelp">隔离环境与页面 JavaScript 相互隔离；页面环境与页面共享全局变量。切换后需要保存规则才会生效。</span>
</span>
</div>
<div class="field compact-field link-field">
<span class="field-label with-help">
<span data-i18n="jsLinksLabel">JS 链接</span>
<span class="help-tooltip" role="note" tabindex="0" data-i18n-aria-label="jsLinksHelpAria" aria-label="查看 JS 链接帮助">
<span aria-hidden="true">?</span>
<span id="js-links-help" class="help-tooltip-content" role="tooltip" data-i18n="jsLinksHelp">链接脚本在隔离的用户脚本环境中执行。它们定义的变量和函数不会暴露给页面脚本，但可供同一规则中的自定义 JS 使用。</span>
</span>
</span>
<div id="js-url-list" class="url-list"></div>
<button id="add-js-url" class="add-link-button" type="button" data-i18n="addJsLink">＋ 添加 JS 链接</button>
</div>
<label class="field compact-field code-field">
<span class="field-label with-help">
<span data-i18n="customJsLabel">自定义 JS</span>
<span class="help-tooltip" role="note" tabindex="0" data-i18n-aria-label="customJsHelpAria" aria-label="查看自定义 JS 帮助">
<span aria-hidden="true">?</span>
<span id="custom-js-help" class="help-tooltip-content" role="tooltip" data-i18n="customJsHelp">此处填写的 JavaScript 与该规则的 JS 链接在同一隔离环境中按顺序执行，因此可以调用链接脚本定义的变量和函数。</span>
</span>
</span>
<textarea id="js" spellcheck="false" placeholder="document.body.dataset.customized = 'true';"></textarea>
<span id="js-error" class="field-error"></span>
</label>
</section>
</div>
<div class="form-actions">
<button id="delete-rule" class="button danger" type="button" data-i18n="deleteRule">删除</button>
<div class="action-group">
<button id="cancel-edit" class="button secondary" type="button" data-i18n="cancel">取消</button>
<button id="save-rule" class="button primary save-button" type="submit">
<span data-i18n="saveRule">保存规则</span>
<span id="save-shortcut" class="button-shortcut">Ctrl S</span>
</button>
</div>
</div>
</form>
</section>
</main>
<div id="permission-tooltip" class="permission-tooltip" role="tooltip" hidden></div>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script type="module" src="options.js"></script>
</body>
</html>