扩展selector语法,支持获取元素属性

This commit is contained in:
Easy
2022-08-25 14:08:45 +08:00
parent a685f360f1
commit aa4247ebde
11 changed files with 66 additions and 26 deletions
+10 -3
View File
@@ -12,9 +12,9 @@
## 最新版本
- 插件·Chrome/Edge2022.08.23.13.11 [下载](ckc.zip) ([Github下载地址,无需注册](https://github.com/easychen/checkchan-dist/raw/master/ckc.zip))
- Docker镜像(云端+远程桌面二合一)2022.08.23.12.59 [Docker Hub](https://hub.docker.com/repository/docker/easychen/checkchan)
- 文档:2022.08.23.13.11
- 插件·Chrome/Edge2022.08.25.14.08 [下载](ckc.zip) ([Github下载地址,无需注册](https://github.com/easychen/checkchan-dist/raw/master/ckc.zip))
- Docker镜像(云端+远程桌面二合一)2022.08.25.13.48 [Docker Hub](https://hub.docker.com/repository/docker/easychen/checkchan)
- 文档:2022.08.25.14.08
- 更新日志:[GitHub](https://github.com/easychen/checkchan-dist/commits/main)
- 生态:RSSHub浏览器插件整合版([源码](https://github.com/easychen/RSSHub-Radar-with-checkchan) | [下载](https://github.com/easychen/RSSHub-Radar-with-checkchan/releases/download/main/1.7.0.with-checkchan.zip)
@@ -170,10 +170,17 @@ checkchan://title=Server%E9%85%B1%E5%AE%98%E6%96%B9%E7%BD%91%E7%AB%99%E7%8A%B6%E
### Selector 扩展语法
#### 通过@指定数组元素
最新的版本支持了一个Selector扩展语法:由于底层通过 `document.querySelectorAll` 实现,因此会返回匹配的全部元素于一个数组。当这些元素属于同一个父节点我们可以用 `:nth-of-type(1)` 或者 `:nth-child(1)`来指定数组中的某一项。
但如果这些元素不属于同一个父节点,那么以上方法会失效。这里添加了一个 selector@n 的语法,让我们可以从 Selector 返回的数组中指定某一个元素。如 `.booklist .item@0` 将返回 `document.querySelectorAll(.booklist .item)[0]`
#### 通过%获得元素属性
Selector的最下一级返回一个元素,但有时候我们需要监测这个元素的某个属性值。比如监测一个链接的`href`。为了解决这个问题,我们扩展了 selector 语法,让用户可以通过 element%attribute 的方式来获取元素的某个属性值。如:`article#post-180 > div > div > p > a%href`。当 `%``@` 同时使用时, `%` 应紧跟元素后,如:`article#post-180 > div > div > p > a%href@0`
### 日志查看和错误定位
为了更清楚的了解定时任务的执行情况,你可以打开「开发者工具」(F12)在 `Console` 标签页中可以看到任务产生的日志。
+7
View File
@@ -170,10 +170,17 @@ checkchan://title=Server%E9%85%B1%E5%AE%98%E6%96%B9%E7%BD%91%E7%AB%99%E7%8A%B6%E
### Selector 扩展语法
#### 通过@指定数组元素
最新的版本支持了一个Selector扩展语法:由于底层通过 `document.querySelectorAll` 实现,因此会返回匹配的全部元素于一个数组。当这些元素属于同一个父节点我们可以用 `:nth-of-type(1)` 或者 `:nth-child(1)`来指定数组中的某一项。
但如果这些元素不属于同一个父节点,那么以上方法会失效。这里添加了一个 selector@n 的语法,让我们可以从 Selector 返回的数组中指定某一个元素。如 `.booklist .item@0` 将返回 `document.querySelectorAll(.booklist .item)[0]`
#### 通过%获得元素属性
Selector的最下一级返回一个元素,但有时候我们需要监测这个元素的某个属性值。比如监测一个链接的`href`。为了解决这个问题,我们扩展了 selector 语法,让用户可以通过 element%attribute 的方式来获取元素的某个属性值。如:`article#post-180 > div > div > p > a%href`。当 `%``@` 同时使用时, `%` 应紧跟元素后,如:`article#post-180 > div > div > p > a%href@0`
### 日志查看和错误定位
为了更清楚的了解定时任务的执行情况,你可以打开「开发者工具」(F12)在 `Console` 标签页中可以看到任务产生的日志。
+1 -1
View File
@@ -1 +1 @@
"2022.08.23.13.11"
"2022.08.25.14.08"
BIN
View File
Binary file not shown.
+1 -1
View File
@@ -1 +1 @@
"2022.08.23.12.59"
"2022.08.25.13.48"
+27 -10
View File
@@ -366,7 +366,8 @@ async function monitor_dom_low(item, cookies)
if( ignore_path ) dom.window.document.querySelectorAll(ignore_path).forEach( item => item.remove() );
const path_info = path.split("@");
let ret = dom.window.document.querySelectorAll(path_info[0]);
const selector_info = path_info[0].split("%");
let ret = dom.window.document.querySelectorAll(selector_info[0]);
if( path_info[1] ) ret = [ret[path_info[1]]];
let texts = [];
@@ -374,10 +375,21 @@ async function monitor_dom_low(item, cookies)
for( let item of ret )
{
if( !item ) continue;
item.querySelectorAll("[src]").forEach( item => { if( item.src.substr(0,4) != 'http' ) { item.src = new URL(url).origin +( item.src.substr(0,1) == '/' ? item.src : '/'+ item.src ) } } );
if( item.textContent ) texts.push(item.textContent?.trim());
html += item.outerHTML ? item.outerHTML + "<br/>" : "";
['src','href'].forEach( field => {
item.querySelectorAll("["+field+"]").forEach( item => { if( item.field.substr(0,4) != 'http' ) { item.field = new URL(url).origin +( item.field.substr(0,1) == '/' ? item.field : '/'+ item.field ) } } );
if( item[field] )
{
if( item[field].substr(0,4) != 'http' ) { item[field] = new URL(url).origin +( item[field].substr(0,1) == '/' ? item[field] : '/'+ item[field] ) }
};
} );
const field = selector_info[1] ? selector_info[1] : "textContent";
if( item[field] ) texts.push(item[field]?.trim());
if( field == 'textContent' )
html += item.outerHTML ? item.outerHTML + "<br/>" : "";
}
return {text:path.indexOf(",") >= 0 ? texts.join("\n") :texts[0]||"",html,all};
@@ -547,7 +559,8 @@ async function monitor_dom(item , cookies)
if( ignore_path ) window.document.querySelectorAll(ignore_path).forEach( item => item.remove() );
const path_info = path.split("@");
let ret = window.document.querySelectorAll(path_info[0]);
const selector_info = path_info[0].split("%");
let ret = window.document.querySelectorAll(selector_info[0]);
if( path_info[1] ) ret = [ret[path_info[1]]];
if( !ret ) return false;
@@ -558,8 +571,9 @@ async function monitor_dom(item , cookies)
{
item.querySelectorAll("[src]").forEach( item => { if( item.src.substr(0,4) != 'http' ) { item.src = window.origin +( item.src.substr(0,1) == '/' ? item.src : '/'+ item.src ) } } );
if( item.innerText ) texts.push(item.innerText?.trim());
html += item.outerHTML ? item.outerHTML + "<br/>" : "";
const field = selector_info[1] ? selector_info[1] : "innerText";
if( item[field] ) texts.push(item[field]?.trim());
if( field == 'innerText' ) html += item.outerHTML ? item.outerHTML + "<br/>" : "";
}
return {html,text:path.indexOf(",") >= 0 ? texts.join("\n") :texts[0]||"","all":window.document.documentElement.innerHTML};
},path,browser_code,ignore_path,click_path,data_path,scroll_down);
@@ -597,7 +611,8 @@ async function monitor_dom(item , cookies)
if( ignore_path ) window.document.querySelectorAll(ignore_path).forEach( item => item.remove() );
const path_info = path.split("@");
let ret = window.document.querySelectorAll(path_info[0]);
const selector_info = path_info[0].split("%");
let ret = window.document.querySelectorAll(selector_info[0]);
if( path_info[1] ) ret = [ret[path_info[1]]];
console.log("query fail again",path,ret);
@@ -608,8 +623,10 @@ async function monitor_dom(item , cookies)
{
item.querySelectorAll("[src]").forEach( item => { if( item.src.substr(0,4) != 'http' ) { item.src = window.origin +( item.src.substr(0,1) == '/' ? item.src : '/'+ item.src ) } } );
if( item.innerText ) texts.push(item.innerText?.trim());
html += item.outerHTML ? item.outerHTML + "<br/>" : "";
const field = selector_info[1] ? selector_info[1] : "innerText";
if( item[field] ) texts.push(item[field]?.trim());
if( field == 'innerText' ) html += item.outerHTML ? item.outerHTML + "<br/>" : "";
}
return {html,text:path.indexOf(",") >= 0 ? texts.join("\n") :texts[0]||"","all":window.document.documentElement.innerHTML};
},path,browser_code,ignore_path,click_path,data_path,scroll_down);
@@ -3,7 +3,7 @@
"message": "Check酱"
},
"appDesc": {
"message": "监控页面变动,并发送异动到微信。 Build.2022.08.23.13.11",
"message": "监控页面变动,并发送异动到微信。 Build.2022.08.25.14.08",
"description":"亦支持http status、json和rss监测。配合自架云端,关电脑后也能运行。"
}
}
+6 -3
View File
@@ -115,7 +115,8 @@ async function ck_get_content( path,delay=3000, ignore_path = "",click_path = ""
// path 扩展语法 selector@1,selector
const path_info = path.split("@");
let ret = window.document.querySelectorAll(path_info[0]);
const selector_info = path_info[0].split("%");
let ret = window.document.querySelectorAll(selector_info[0]);
if( path_info[1] ) ret = [ret[path_info[1]]];
@@ -128,8 +129,10 @@ async function ck_get_content( path,delay=3000, ignore_path = "",click_path = ""
item.querySelectorAll("[href]").forEach( item => { if( item.href.substr(0,4) != 'http' ) { item.href = window.origin +( item.href.substr(0,1) == '/' ? item.href : '/'+ item.href ) } } );
if( item.innerText ) texts.push(item.innerText?.trim());
html += item.outerHTML ? item.outerHTML + "<br/>" : "";
const field = selector_info[1] ? selector_info[1] : "innerText";
if( item[field] ) texts.push(item[field]?.trim());
if( field == 'innerText' )
html += item.outerHTML ? item.outerHTML + "<br/>" : "";
}
let data_ret = "";
+1 -1
View File
@@ -3,7 +3,7 @@
"name": "__MSG_appTitle__",
"description": "__MSG_appDesc__",
"default_locale": "en",
"version": "0.9.10",
"version": "0.9.11",
"icons": {
"512": "logo.color.png"
},
+6 -3
View File
@@ -20,9 +20,9 @@
</ol>
<h2>最新版本</h2>
<ul>
<li>插件·Chrome/Edge2022.08.23.13.11 <a href="ckc.zip">下载</a> (<a href="https://github.com/easychen/checkchan-dist/raw/master/ckc.zip">Github下载地址,无需注册</a>)</li>
<li>Docker镜像(云端+远程桌面二合一)2022.08.23.12.59 <a href="https://hub.docker.com/repository/docker/easychen/checkchan" rel="nofollow">Docker Hub</a></li>
<li>文档:2022.08.23.13.11</li>
<li>插件·Chrome/Edge2022.08.25.14.08 <a href="ckc.zip">下载</a> (<a href="https://github.com/easychen/checkchan-dist/raw/master/ckc.zip">Github下载地址,无需注册</a>)</li>
<li>Docker镜像(云端+远程桌面二合一)2022.08.25.13.48 <a href="https://hub.docker.com/repository/docker/easychen/checkchan" rel="nofollow">Docker Hub</a></li>
<li>文档:2022.08.25.14.08</li>
<li>更新日志:<a href="https://github.com/easychen/checkchan-dist/commits/main">GitHub</a></li>
<li>生态:RSSHub浏览器插件整合版(<a href="https://github.com/easychen/RSSHub-Radar-with-checkchan">源码</a> | <a href="https://github.com/easychen/RSSHub-Radar-with-checkchan/releases/download/main/1.7.0.with-checkchan.zip">下载</a></li>
</ul>
@@ -106,8 +106,11 @@
<p>如果 「监测周期限制」 为每分钟,而「监控间隔时间」为60分钟,那么每分钟都会尝试监测,而一旦监测成功一次,那么下次监测将是60分钟后。</p>
<p>同时,因为执行监测任务本身也耗费时间,所以「监控间隔时间」为1分钟时,往往每隔一分钟(即每两分钟)才会运行一次任务。</p>
<h3>Selector 扩展语法</h3>
<h4>通过@指定数组元素</h4>
<p>最新的版本支持了一个Selector扩展语法:由于底层通过 <code class="notranslate">document.querySelectorAll</code> 实现,因此会返回匹配的全部元素于一个数组。当这些元素属于同一个父节点我们可以用 <code class="notranslate">:nth-of-type(1)</code> 或者 <code class="notranslate">:nth-child(1)</code>来指定数组中的某一项。</p>
<p>但如果这些元素不属于同一个父节点,那么以上方法会失效。这里添加了一个 selector@n 的语法,让我们可以从 Selector 返回的数组中指定某一个元素。如 <code class="notranslate">.booklist .item@0</code> 将返回 <code class="notranslate">document.querySelectorAll(.booklist .item)[0]</code></p>
<h4>通过%获得元素属性</h4>
<p>Selector的最下一级返回一个元素,但有时候我们需要监测这个元素的某个属性值。比如监测一个链接的<code class="notranslate">href</code>。为了解决这个问题,我们扩展了 selector 语法,让用户可以通过 element%attribute 的方式来获取元素的某个属性值。如:<code class="notranslate">article#post-180 &gt; div &gt; div &gt; p &gt; a%href</code>。当 <code class="notranslate">%</code><code class="notranslate">@</code> 同时使用时, <code class="notranslate">%</code> 应紧跟元素后,如:<code class="notranslate">article#post-180 &gt; div &gt; div &gt; p &gt; a%href@0</code></p>
<h3>日志查看和错误定位</h3>
<p>为了更清楚的了解定时任务的执行情况,你可以打开「开发者工具」(F12)在 <code class="notranslate">Console</code> 标签页中可以看到任务产生的日志。</p>
<p><a target="_blank" rel="noopener noreferrer" href="image/20220523211235.png"><img src="image/20220523211235.png" alt="" style="max-width: 100%;"></a></p>
+6 -3
View File
@@ -9,9 +9,9 @@
</ol>
<h2>最新版本</h2>
<ul>
<li>插件·Chrome/Edge2022.08.23.13.11 <a href="ckc.zip">下载</a> (<a href="https://github.com/easychen/checkchan-dist/raw/master/ckc.zip">Github下载地址,无需注册</a>)</li>
<li>Docker镜像(云端+远程桌面二合一)2022.08.23.12.59 <a href="https://hub.docker.com/repository/docker/easychen/checkchan" rel="nofollow">Docker Hub</a></li>
<li>文档:2022.08.23.13.11</li>
<li>插件·Chrome/Edge2022.08.25.14.08 <a href="ckc.zip">下载</a> (<a href="https://github.com/easychen/checkchan-dist/raw/master/ckc.zip">Github下载地址,无需注册</a>)</li>
<li>Docker镜像(云端+远程桌面二合一)2022.08.25.13.48 <a href="https://hub.docker.com/repository/docker/easychen/checkchan" rel="nofollow">Docker Hub</a></li>
<li>文档:2022.08.25.14.08</li>
<li>更新日志:<a href="https://github.com/easychen/checkchan-dist/commits/main">GitHub</a></li>
<li>生态:RSSHub浏览器插件整合版(<a href="https://github.com/easychen/RSSHub-Radar-with-checkchan">源码</a> | <a href="https://github.com/easychen/RSSHub-Radar-with-checkchan/releases/download/main/1.7.0.with-checkchan.zip">下载</a></li>
</ul>
@@ -95,8 +95,11 @@
<p>如果 「监测周期限制」 为每分钟,而「监控间隔时间」为60分钟,那么每分钟都会尝试监测,而一旦监测成功一次,那么下次监测将是60分钟后。</p>
<p>同时,因为执行监测任务本身也耗费时间,所以「监控间隔时间」为1分钟时,往往每隔一分钟(即每两分钟)才会运行一次任务。</p>
<h3>Selector 扩展语法</h3>
<h4>通过@指定数组元素</h4>
<p>最新的版本支持了一个Selector扩展语法:由于底层通过 <code class="notranslate">document.querySelectorAll</code> 实现,因此会返回匹配的全部元素于一个数组。当这些元素属于同一个父节点我们可以用 <code class="notranslate">:nth-of-type(1)</code> 或者 <code class="notranslate">:nth-child(1)</code>来指定数组中的某一项。</p>
<p>但如果这些元素不属于同一个父节点,那么以上方法会失效。这里添加了一个 selector@n 的语法,让我们可以从 Selector 返回的数组中指定某一个元素。如 <code class="notranslate">.booklist .item@0</code> 将返回 <code class="notranslate">document.querySelectorAll(.booklist .item)[0]</code></p>
<h4>通过%获得元素属性</h4>
<p>Selector的最下一级返回一个元素,但有时候我们需要监测这个元素的某个属性值。比如监测一个链接的<code class="notranslate">href</code>。为了解决这个问题,我们扩展了 selector 语法,让用户可以通过 element%attribute 的方式来获取元素的某个属性值。如:<code class="notranslate">article#post-180 &gt; div &gt; div &gt; p &gt; a%href</code>。当 <code class="notranslate">%</code><code class="notranslate">@</code> 同时使用时, <code class="notranslate">%</code> 应紧跟元素后,如:<code class="notranslate">article#post-180 &gt; div &gt; div &gt; p &gt; a%href@0</code></p>
<h3>日志查看和错误定位</h3>
<p>为了更清楚的了解定时任务的执行情况,你可以打开「开发者工具」(F12)在 <code class="notranslate">Console</code> 标签页中可以看到任务产生的日志。</p>
<p><a target="_blank" rel="noopener noreferrer" href="image/20220523211235.png"><img src="image/20220523211235.png" alt="" style="max-width: 100%;"></a></p>