Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

新增拖拽上传规则和选项页README #9

Merged
merged 5 commits into from
Nov 14, 2022
Merged

新增拖拽上传规则和选项页README #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f6dc6a6
添加选项页说明 (#114)
jingjingxyk Nov 10, 2022
902b102
Merge remote-tracking branch 'upstream/master' into dev
jingjingxyk Nov 11, 2022
ebb5d80
添加拖拽上传文件
jingjingxyk Nov 14, 2022
81265ac
限制拖拽上传文件类型
jingjingxyk Nov 14, 2022
99e37e7
修改选项页注释
jingjingxyk Nov 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions extension/options_ui/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,11 @@ chrome.declarativeNetRequest.updateDynamicRules(

| 规则来源 | 对应选项页选项 | ID 区间段 | 区间名称 | 作用 | 与删除选项的关系) |
| :--------------------- | :-------------------------------------------------------------------------------- | :-------------------------: | :------------------- | :------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- |
| 使用者自定义 | 选项三：自定义规则 --新增规则 | 10000>=规则 ID 编号<=19999 | 自定义特制规则编号 | 自己定义规则 普通规则 | 与选项一：清空所有自定义动态规则 相对应。删除普通自定义规则，不会删除特制规则，删除规则时只删除对应区间的规则 |
| 使用者自定义 | 选项三：自定义规则 --新增特制规则 | 20000>=规则 ID 编号<=29999 | 自定义特制规则编号 | 自己定义规则 特制规则 | 与选项一：清空所有自定义动态规则 相对应。删除特制自定义规则，不会自定义普通规则，删除规则时只删除对应区间的规则 |
| 自定义 | 选项三：自定义规则 --新增特制规则 | 10000>=规则 ID 编号<=19999 | 自定义特制规则编号 | 自己定义规则 特制规则 | 与选项一：清空所有自定义动态规则 相对应。删除普通自定义规则，不会删除特制规则，删除规则时只删除对应区间的规则 |
| 自定义 | 选项三：自定义规则 -- 新增普通规则 | 20000>=规则 ID 编号<=29999 | 自定义普通规则编号 | 自己定义规则 普通规则 | 与选项一：清空所有自定义动态规则 相对应。删除特制自定义规则，不会自定义普通规则，删除规则时只删除对应区间的规则 |
| 同步远端配置的静态规则 | 选项一：全局动态规则处理 --同步远端仓库最新静态规则到本地，并停用本地默认静态规则 | 30000<=规则 ID 编号<=39999 | 同步远端静态规则编号 | 实现不更新扩展，更新默认规则，取代本地已有的默认静态规则 | 与选项一： 同步远端仓库最新静态规则到本地，并停用本地默认静态规则 相对应。删除规则时只删除对应区间的规则 |
| 同步远端动态规则 | 选项二：同步远端配置规则 --同步远端配置规则 | 40000<=规则 ID 编号<=320000 | 同步远端动态规则 | 同步指定仓库地址的规则， 实现不更新扩展，更新规则 | 与选项一：清空所有已同步的远端动态规则 相对应。删除规则时只删除对应区间的规则 |
| 其它未定义 | 无 | 无 | 无 | 无 | 无 |
| 未定义 | 无 | 无 | 无 | 无 | 无 |

```text
自定义特制规则编号： 10000>=编号<=19999
Expand All @@ -121,7 +121,7 @@ chrome.declarativeNetRequest.updateDynamicRules(

## 清空所有动态规则

> 也就通过 `chrome.declarativeNetRequest.updateDynamicRules` 添加的规则，都会被删除
> 通过 `chrome.declarativeNetRequest.updateDynamicRules` 添加的规则，都会被删除

## 备份规则

Expand Down
5 changes: 5 additions & 0 deletions extension/options_ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,11 @@ <h5></h5>
accept="application/json,text/plain,text/txt"
/>
</label>
<span class="placeholder-box"></span>
<span class="placeholder-box"></span>
<label for="dropbox">
<button id="dropbox" class="dropbox">拖拽文件到这里</button>
</label>
<h5></h5>
<br />
<label class="autofill-self-define-rule example-item example-hidden">
Expand Down
71 changes: 66 additions & 5 deletions extension/options_ui/js/component/self-define-conf-rule.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,20 @@ let add_self_define_rule = (type = "self_define_rule") => {
});
}
};

/**
* 增加普通规则
*/
let self_define_conf = () => {
document.querySelector(".add-rule").addEventListener("click", (event) => {
event.stopPropagation();
event.preventDefault();
add_self_define_rule("self_define_rule");
});

/**
* 增加特制规则
*/
document
.querySelector(".add-special-rule")
.addEventListener("click", (event) => {
Expand All @@ -92,21 +100,74 @@ let self_define_conf = () => {
document.querySelector("#upload-file-to-rule").click();
});

/**
* 文件上传规则和拖拽上传
*/
let showUploadFileContent = (file) => {
let reader = new FileReader();
reader.onload = function () {
document.querySelector(".new-add-rule-pannel").value = this.result;
};
reader.readAsText(file);
};

document
.querySelector("#upload-file-to-rule")
.addEventListener("change", (event) => {
const files = event.target.files;
if (files && files[0]) {
const file = files[0];
console.log(file);
let reader = new FileReader();
reader.onload = function () {
document.querySelector(".new-add-rule-pannel").value = this.result;
};
reader.readAsText(file);
showUploadFileContent(file);
}
});

// https://developer.mozilla.org/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications
let dropbox;

dropbox = document.getElementById("dropbox");

dropbox.addEventListener(
"dragenter",
(e) => {
e.stopPropagation();
e.preventDefault();
},
false
);
dropbox.addEventListener(
"dragover",
(e) => {
e.stopPropagation();
e.preventDefault();
},
false
);

dropbox.addEventListener(
"drop",
(e) => {
e.stopPropagation();
e.preventDefault();

let dt = e.dataTransfer;
let files = dt.files;

let fileType = /^(application\/json)|(text\/plain)/;
const file = files[0];
console.log(file);
if (files && files[0] && fileType.test(files[0].type)) {
const file = files[0];
console.log(file);
showUploadFileContent(file);
}
},
false
);

/**
* 演示例子
*/
document
.querySelector(".autofill-self-define-rule")
.addEventListener("click", (event) => {
Expand Down