The official has built-in one click download function for the main image, SKU image, and detail image of a certain e-commerce website, and also supports custom extraction of high-definition images.
The custom JSON template configuration function can configure regular expressions for a website's webpage code, allowing plugins to dynamically expand the supported websites.
Readers and users of this article need to possess the following abilities:
1. Understand basic web front-end technologies such as HTML, JavaScript, CSS, AJAX, etc., in order to better understand web page structure and code logic, and provide a foundation for configuring regular expressions.
2. Proficient in using developer tools for Chrome browser, able to use the tool for web page analysis, debugging, and viewing code structure, providing strong support for the configuration process. Proficient in using regular expressions and tools, mastering the syntax and rules of regular expressions, and able to accurately extract the required webpage content.
3. Possess self-learning and problem-solving abilities, actively learn and explore solutions when encountering problems during use, to ensure the smooth completion of configuration work.
Usage scenarios
Step 1:Confirm the Dom structure of the images that need to be collected
Open F12 on the corresponding website, as shown in the figure below, and find the corresponding comic structure.
As shown in the figure, the current selector is
#comicContain img
Infer the downloadable list as follows
[...document.querySelectorAll(`#comicContain img`)].map(o => o.src)
Visible on the console:
Step 2:Fill Template
Universal comic download template, of course, there are also more complex scenarios:
{
"id": 90005,
"name": Tencent Comics,
"ico": "https://oss.floweb.cn/ac.qq.com",
"version": "24.12.01",
"description": Support ac.qq.com image download, one click download of images,
"reg": "ac.qq.com",
"tags": [
"manhua"
],
"status": "prod",
"examples": [
"https://ac.qq.com/ComicView/index/id/543584/cid/1"
],
"groups": [
{
"fn": "updateGroupByIds",
"props": {
& nbsp; & nbsp; & nbsp; "groupName": Chapter ",
"groupIndex": 1,
"source": "[...document.querySelectorAll(`#comicContain img`)].map(o => o.src)",
"ids": [
{
"attributes": [],
"replaceUrlRules": [
{
"pattern": "!q.*$",
"replaceValue": "?desc"
}
]
}
]
}
}
]
}
Particular attention
- id: Any non repeating ID
- status: Designated as prod
The current key changes are: Source keyword
Tip: Dynamically generating icons can be done using the Floweb tool. For more information, please refer to the Floweb tool; www.floweb.cn
Add to smart script:
Step 3:Custom file name:
Jump to the download page:
Download directly:
All JSON interface semantics
export interface IGroupConfig {
// Unique ID
id: number;
// Plugin Name
name: string;
// Plugin icon
ico?: string;
// Plugin version
version?: string;
// Plugin Description
description?: string;
// Default matching path
reg: string;
// Pre script
prevJS: string;
// Plugin grouping function
groups: IRun[];
// Release status
status?: string;
// example
examples?: string[];
}
export interface IRun {
// Function capability
fn: string;
// Additional transmission reference
props: IRunProps;
}
export interface IIds {
// Parameter Ids
id: string;
// Parameter Path
attributes?: string[];
// Type, possibly video type
type?: string;
// Image description information
alt?: string;
// Replace Image Rules
replaceUrlRules?: IReplaceUrlRule[];
// Filter image rules
filterUrlRules?: IReplaceUrlRule[];
}
export interface IReplaceUrlRule {
// Replace regular
pattern: string
// Regular local/full matching
flags?: string
// Replace value
replaceValue?: string
}
export interface IRunProps {
// The default source object is document.querySelectorAll, which returns an iterable array
source?: string;
// Parameter Ids
ids: IIds[];
// Group name
groupName: string;
// Group index
groupIndex: number;
}
- Original text:https://mp.weixin.qq.com/s/tI2l8jbla4lczAJl7On27A
Published on 2024-12-10
广东
PicHound Browser Web Page Image Batch Download Editing Management Plugin Tool
