qiuqiu/obsidian @ a98a488b0d3fd2b3bc075dc79486e87171a925af

#灵感

官方说明文档：https://docs.lunalabs.io/docs/playable/overview 前辈踩坑指南参考：https://blog.csdn.net/final5788/article/details/123910206

在playwork生成的，单html文件中，预加载的时候，会有这个进度条

![[Pasted image 20250620095345.png]]

是因为有这仨css样式

.preloader__outer__bar {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: 1.2vmax;
    margin: 0.4vmax;
    border-radius: 1000px;
}

.preloader__outer__bar:before {
    content: '';
    position: absolute;
    border: 0.3vmax solid #fff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 100vh;
}

.preloader__bar {
    width: 0;
    height: calc(100% - 0.4vmax);
    margin: 0.2vmax;
    border-radius: 10000px;
    box-sizing: border-box;
    background: white;
    animation: loading 8s forwards;
}

解决方法：

![[Pasted image 20250620095940.png]]

代码示例 (实测.preloader__bar也可以不加)

            .preloader__outer__bar {
                display: none !important;
                display: flex;
                justify-content: left;
                align-items: center;
                width: 100%;
                height: 1.2vmax;
                margin: 0.4vmax;
                border-radius: 1000px;
            }

            .preloader__outer__bar:before {
                display: none !important;
                content: '';
                position: absolute;
                border: 0.3vmax solid #fff;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                border-radius: 100vh;
            }

            .preloader__bar {
                width: 0;
                height: calc(100% - 0.4vmax);
                margin: 0.2vmax;
                border-radius: 10000px;
                box-sizing: border-box;
                background: white;
                animation: loading 8s forwards;
            }

作用说明：

![[Pasted image 20250620100408.png]]

![[Pasted image 20250620100450.png]]

![[Pasted image 20250620100509.png]]

重新打开网页，可以看到，是生效的了，没有进度条

![[Pasted image 20250620100604.png]]

参考python逻辑：

precise_inject.py

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
精确CSS注入脚本
专门用于在指定的三个CSS样式中注入display: none !important;
"""

import re
import sys

def precise_inject_display_none(html_file_path):
    """
    在指定的CSS样式中精确注入display: none !important;
    
    Args:
        html_file_path (str): HTML文件路径
    """
    
    try:
        # 读取HTML文件
        with open(html_file_path, 'r', encoding='utf-8') as file:
            content = file.read()
        
        modified = False
        
        # 定义要处理的样式选择器
        selectors = [
            '.preloader__outer__bar',
            '.preloader__outer__bar:before',
            '.preloader__outer__bar:after'
        ]
        
        for selector in selectors:
            # 构建正则表达式来匹配完整的CSS规则块
            pattern = r'(' + re.escape(selector) + r'\s*\{[^}]*\})'
            match = re.search(pattern, content, re.DOTALL)
            
            if match:
                css_block = match.group(1)
                
                # 检查是否已经包含 display: none !important;
                if 'display: none !important;' not in css_block:
                    # 在开括号后插入 display: none !important;
                    new_css_block = re.sub(
                        r'(\s*\{)',
                        r'\1\n                display: none !important;',
                        css_block,
                        count=1
                    )
                    content = content.replace(css_block, new_css_block)
                    modified = True
                    print(f"✓ 已为 {selector} 添加 display: none !important;")
                else:
                    print(f"○ {selector} 已包含 display: none !important;")
            else:
                print(f"✗ 未找到 {selector} 样式")
        
        if modified:
            # 写回文件
            with open(html_file_path, 'w', encoding='utf-8') as file:
                file.write(content)
            print(f"\n✅ 成功: 已更新文件 {html_file_path}")
        else:
            print(f"\nℹ️  无需修改: 所有样式都已包含 display: none !important;")
        
        return True
        
    except FileNotFoundError:
        print(f"❌ 错误: 文件 {html_file_path} 不存在")
        return False
    except Exception as e:
        print(f"❌ 错误: 处理文件时发生异常: {str(e)}")
        return False

def show_usage():
    """显示使用方法"""
    print("使用方法: python precise_inject.py <HTML文件路径>")
    print("示例: python precise_inject.py index.html")
    print("\n功能: 在以下CSS样式中注入 display: none !important;")
    print("  - .preloader__outer__bar")
    print("  - .preloader__outer__bar:before") 
    print("  - .preloader__outer__bar:after")

if __name__ == "__main__":
    if len(sys.argv) < 2:
        show_usage()
    else:
        precise_inject_display_none(sys.argv[1])

FAQ

![[Pasted image 20250623134016.png]]

试玩广告 facebook的参考文档链接

https://www.facebook.com/business/help/412951382532338?helpref=faq_content

试玩广告 facebook测试页面(测试可用性很一般)

https://developers.facebook.com/tools/playable-preview/

根据facebook的参考文档，需要在跳转商店之前，先调用facebook的FbPlayableAd.onCTAClick点击接口；基于上述代码逻辑，完善后的facebook的python逻辑处理参考：

fb.py

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
精确CSS和JS注入脚本
- 在指定CSS选择器样式块中注入display: none !important;
- 在所有 mraid.open(storeLink); 前注入FbPlayableAd.onCTAClick()代码
"""

import re
import sys

def precise_inject_display_none_and_js(html_file_path):
    try:
        with open(html_file_path, 'r', encoding='utf-8') as file:
            content = file.read()

        modified = False

        # CSS注入
        selectors = [
            '.preloader__outer__bar',
            '.preloader__outer__bar:before',
            '.preloader__outer__bar:after'
        ]
        inject_css = "display: none !important;"
        for selector in selectors:
            pattern = r'(' + re.escape(selector) + r'\s*\{[^}]*\})'
            match = re.search(pattern, content, re.DOTALL)
            if match:
                css_block = match.group(1)
                if inject_css not in css_block:
                    new_css_block = re.sub(
                        r'(\s*\{)',
                        r'\1\n                display: none !important;',
                        css_block,
                        count=1
                    )
                    content = content.replace(css_block, new_css_block)
                    modified = True
                    print(f"✓ 已为 {selector} 添加 display: none !important;")
                else:
                    print(f"○ {selector} 已包含 display: none !important;")
            else:
                print(f"✗ 未找到 {selector} 样式")

        # JS注入
        pattern_js = r'^[ \t]*mraid\.open\s*\(\s*storeLink\s*\)\s*;'
        def js_injector(match):
            indent = re.match(r'^[ \t]*', match.group(0)).group(0)
            js_code = (
                f"{indent}if (typeof FbPlayableAd !== 'undefined' && FbPlayableAd.onCTAClick) {{\n"
                f"{indent}    FbPlayableAd.onCTAClick();\n"
                f"{indent}}}\n"
            )
            return js_code + match.group(0)

        new_content, count = re.subn(pattern_js, js_injector, content, flags=re.MULTILINE)
        if count > 0:
            content = new_content
            modified = True
            print(f"✓ 已在 {count} 处 mraid.open(storeLink); 前注入FbPlayableAd.onCTAClick()代码")
        else:
            print("✗ 未找到 mraid.open(storeLink);，未注入JS")

        # 写回文件
        if modified:
            with open(html_file_path, 'w', encoding='utf-8') as file:
                file.write(content)
            print(f"\n✅ 成功: 已更新文件 {html_file_path}")
        else:
            print(f"\nℹ️  无需修改: 所有内容都已包含")

        return True

    except FileNotFoundError:
        print(f"❌ 错误: 文件 {html_file_path} 不存在")
        return False
    except Exception as e:
        print(f"❌ 错误: 处理文件时发生异常: {str(e)}")
        return False

def show_usage():
    print("使用方法: python precise_inject.py <HTML文件路径>")
    print("示例: python precise_inject.py index.html")
    print("\n功能: 在以下CSS样式中注入 display: none !important; 并在 mraid.open(storeLink); 前注入FbPlayableAd.onCTAClick()")

if __name__ == "__main__":
    if len(sys.argv) < 2:
        show_usage()
    else:
        precise_inject_display_none_and_js(sys.argv[1])

试玩广告 Playworks 临时记录.md 9.1 KB Historique Raw

precise_inject.py

fb.py

试玩广告 Playworks 临时记录.md 9.1 KB

Historique Raw