Feat: Dynamic Sponsor Block

hanydd · Jan 2, 2025 · 0150cb3 · 0150cb3
1 parent 044932c
commit 0150cb3
Show file tree

Hide file tree

Showing 16 changed files with 762 additions and 12 deletions.
diff --git a/manifest/chrome-manifest-extra.json b/manifest/chrome-manifest-extra.json
@@ -22,7 +22,7 @@
       "matches": [
         "https://*.bilibili.com/*"
       ],
-      "all_frames": false,
+      "all_frames": true,
       "js": [
         "./js/content.js"
       ],
@@ -37,7 +37,7 @@
       "matches": [
         "https://*.bilibili.com/*"
       ],
-      "all_frames": false,
+      "all_frames": true,
       "js": [
         "./js/document.js"
       ]

diff --git a/manifest/firefox-manifest-extra.json b/manifest/firefox-manifest-extra.json
@@ -15,7 +15,7 @@
       "matches": [
         "https://*.bilibili.com/*"
       ],
-      "all_frames": false,
+      "all_frames": true,
       "js": [
         "./js/content.js"
       ],

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -1237,5 +1237,65 @@
     },
     "bindPortVideo": {
         "message": "同步搬运视频"
+    },
+    "dynamicSponsorBlocker": {
+        "message": "隐藏动态主页的UP主贴片广告 (不包含视频)"
+    },
+    "dynamicSponsorBlockerDescription": {
+        "message": "贴片广告即动态内容包含推广内容的UP主动态"
+    },
+    "dynamicSpaceSponsorBlocker": {
+        "message": "隐藏UP主主页动态的广告"
+    },
+    "dynamicSpaceSponsorBlockerDescription": {
+        "message": "UP主主页动态的广告也会隐藏，不推荐开启，以方便查看UP主的完整动态"
+    },
+    "dynamicSponsorWhitelistedChannels": {
+        "message": "无视您的白名单"
+    },
+    "dynamicSponsorWhitelistedChannelsDescription": {
+        "message": "隐藏全部贴片广告，即使是您白名单中的UP主"
+    },
+    "dynamicSponsorShow": {
+        "message": "显示广告内容"
+    },
+    "dynamicSponsorHide": {
+        "message": "隐藏广告内容"
+    },
+    "dynamicSponsorRegexPattern": {
+        "message": "屏蔽匹配正则: "
+    },
+    "dynamicSponsorRegexPatternDescription": {
+        "message": "默认正则表达式偏保守，建议根据您关注的UP主动态内容自行修改(如果您会编写正则表达式)\n例如您关注的UP主们经常发某一个产品的广告，您可以将该产品的名称添加到正则表达式中"
+    },
+    "category_dynamicSponsor_sponsor": {
+        "message": "广告"
+    },
+    "category_dynamicSponsor_sponsor_description": {
+        "message": "即包含商品链接的UP主动态，目前阶段无法完全屏蔽，因为部分软广可能不附带链接或链接在评论区"
+    },
+    "category_dynamicSponsor_forward_sponsor": {
+        "message": "转发广告"
+    },
+    "category_dynamicSponsor_forward_sponsor_description": {
+        "message": "当转发动态是包含商品链接的UP主动态时，该动态会被视为转发广告"
+    },
+    "category_dynamicSponsor_suspicion_sponsor":{
+        "message": "疑似广告"
+    },
+    "category_dynamicSponsor_suspicion_sponsor_description": {
+        "message": "使用正则表达式对动态内容进行匹配来额外屏蔽软广动态，是对“ 广告 ”的补充，可能会误屏蔽或漏屏蔽部分动态"
+    },
+    "showOverlay_DynamicSponsor":{
+        "message": "仅显示标签"
+    },
+    "Hide_DynamicSponsor":{
+        "message": "隐藏内容"
+    },
+    "skipOptionDynamicSponsor":{
+        "message": "选项"
+    },
+    "colorDynamicSponsor":{
+        "message": "标签颜色"
     }
 }
diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -1237,5 +1237,65 @@
     },
     "bindPortVideo": {
         "message": "同步搬运视频"
+    },
+    "dynamicSponsorBlocker": {
+        "message": "隐藏动态主页的UP主贴片广告 (不包含视频)"
+    },
+    "dynamicSponsorBlockerDescription": {
+        "message": "贴片广告即动态内容包含推广内容的UP主动态"
+    },
+    "dynamicSpaceSponsorBlocker": {
+        "message": "隐藏UP主主页动态的广告"
+    },
+    "dynamicSpaceSponsorBlockerDescription": {
+        "message": "UP主主页动态的广告也会隐藏，不推荐开启，以方便查看UP主的完整动态"
+    },
+    "dynamicSponsorWhitelistedChannels": {
+        "message": "无视您的白名单"
+    },
+    "dynamicSponsorWhitelistedChannelsDescription": {
+        "message": "隐藏全部贴片广告，即使是您白名单中的UP主"
+    },
+    "dynamicSponsorShow": {
+        "message": "显示广告内容"
+    },
+    "dynamicSponsorHide": {
+        "message": "隐藏广告内容"
+    },
+    "dynamicSponsorRegexPattern": {
+        "message": "屏蔽匹配正则: "
+    },
+    "dynamicSponsorRegexPatternDescription": {
+        "message": "默认正则表达式偏保守，建议根据您关注的UP主动态内容自行修改(如果您会编写正则表达式)\n例如您关注的UP主们经常发某一个产品的广告，您可以将该产品的名称添加到正则表达式中"
+    },
+    "category_dynamicSponsor_sponsor": {
+        "message": "广告"
+    },
+    "category_dynamicSponsor_sponsor_description": {
+        "message": "即包含商品链接的UP主动态，目前阶段无法完全屏蔽，因为部分软广可能不附带链接或链接在评论区"
+    },
+    "category_dynamicSponsor_forward_sponsor": {
+        "message": "转发广告"
+    },
+    "category_dynamicSponsor_forward_sponsor_description": {
+        "message": "当转发动态是包含商品链接的UP主动态时，该动态会被视为转发广告"
+    },
+    "category_dynamicSponsor_suspicion_sponsor":{
+        "message": "疑似广告"
+    },
+    "category_dynamicSponsor_suspicion_sponsor_description": {
+        "message": "使用正则表达式对动态内容进行匹配来额外屏蔽软广动态，是对“ 广告 ”的补充，可能会误屏蔽或漏屏蔽部分动态"
+    },
+    "showOverlay_DynamicSponsor":{
+        "message": "仅显示标签"
+    },
+    "Hide_DynamicSponsor":{
+        "message": "隐藏内容"
+    },
+    "skipOptionDynamicSponsor":{
+        "message": "选项"
+    },
+    "colorDynamicSponsor":{
+        "message": "标签颜色"
     }
 }
diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
@@ -1237,5 +1237,65 @@
     },
     "bindPortVideo": {
         "message": "同步搬運影片"
+    },
+    "dynamicSponsorBlocker": {
+        "message": "隱藏動態主頁的UP主貼片廣告 (不包含視頻)"
+    },
+    "dynamicSponsorBlockerDescription": {
+        "message": "貼片廣告即動態內容包含推廣內容的UP主動態"
+    },
+    "dynamicSpaceSponsorBlocker": {
+        "message": "隱藏UP主主頁動態的廣告"
+    },
+    "dynamicSpaceSponsorBlockerDescription": {
+        "message": "UP主主頁動態的廣告也會隱藏，不推薦開啟，以方便查看UP主的完整動態"
+    },
+    "dynamicSponsorWhitelistedChannels": {
+        "message": "無視您的白名單"
+    },
+    "dynamicSponsorWhitelistedChannelsDescription": {
+        "message": "隱藏全部貼片廣告，即使是您白名單中的UP主"
+    },
+    "dynamicSponsorShow": {
+        "message": "顯示廣告內容"
+    },
+    "dynamicSponsorHide": {
+        "message": "隱藏廣告內容"
+    },
+    "dynamicSponsorRegexPattern": {
+        "message": "屏蔽匹配正則: "
+    },
+    "dynamicSponsorRegexPatternDescription": {
+        "message": "默認正則表達式偏保守，建議根據您關注的UP主動態內容自行修改(如果您會編寫正則表達式)\n例如您關注的UP主們經常發某一個產品的廣告，您可以將該產品的名稱添加到正則表達式中"
+    },
+    "category_dynamicSponsor_sponsor": {
+        "message": "廣告"
+    },
+    "category_dynamicSponsor_sponsor_description": {
+        "message": "即包含商品鏈接的UP主動態，目前階段無法完全屏蔽，因為部分軟廣可能不附帶鏈接或鏈接在評論區"
+    },
+    "category_dynamicSponsor_forward_sponsor": {
+        "message": "轉發廣告"
+    },
+    "category_dynamicSponsor_forward_sponsor_description": {
+        "message": "當轉發動態是包含商品鏈接的UP主動態時，該動態會被視為轉發廣告"
+    },
+    "category_dynamicSponsor_suspicion_sponsor": {
+        "message": "疑似廣告"
+    },
+    "category_dynamicSponsor_suspicion_sponsor_description": {
+        "message": "使用正則表達式對動態內容進行匹配來額外屏蔽軟廣動態，是對“ 廣告 ”的補充，可能會誤屏蔽或漏屏蔽部分動態"
+    },
+    "showOverlay_DynamicSponsor": {
+        "message": "僅顯示標籤"
+    },
+    "Hide_DynamicSponsor": {
+        "message": "隱藏內容"
+    },
+    "skipOptionDynamicSponsor": {
+        "message": "選項"
+    },
+    "colorDynamicSponsor": {
+        "message": "標籤顏色"
     }
 }
diff --git a/public/content.css b/public/content.css
@@ -931,3 +931,41 @@ input::-webkit-inner-spin-button {
 .youtube-logo-triangle.expanded {
 	transform: rotate(90deg);
 }
+
+/*bilibili Dynamic sponsor label */
+#dynamicSponsorLabel {
+	display: flex;
+	background-color: var(--category-color, #fff);
+	border-radius: 2em;
+	padding: 0.4em;
+	margin: 0.4em;
+    align-items: center;
+	transition: border-radius 0.4s 0.05s;
+}
+
+#dynamicSponsorLabel svg {
+	width: 1.5em;
+	height: 1.5em;
+	fill: var(--category-text-color, #fff);
+}
+
+#dynamicSponsorLabel span {
+	display: none;
+	padding-left: 0.25em;
+    font-size: 1.2em;
+    color: var(--category-text-color, #fff);
+}
+
+#showDynamicSponsor {
+    color: var(--text2);
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+}
+
+#showDynamicSponsor svg {
+	height: 1.2em;
+	width: 1.2em;
+    fill: var(--text2);
+}
diff --git a/public/options/options.html b/public/options/options.html
@@ -49,6 +49,62 @@
 			<div id="behavior" class="option-group hidden">
 				<div id="category-type" data-type="react-CategoryChooserComponent"></div>
 
+				<div data-type="toggle" data-sync="dynamicSponsorBlocker">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="dynamicSponsorBlocker" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="dynamicSponsorBlocker">
+							__MSG_dynamicSponsorBlocker__
+						</label>
+					</div>
+					<div class="small-description">__MSG_dynamicSponsorBlockerDescription__</div>
+
+					<div data-type="toggle" data-dependent-on="dynamicSponsorBlocker">
+						<br />
+						<div id="DynamicSponsor" data-type="react-DynamicSponsorChooserComponent"></div>
+
+						<div data-type="text-change" data-sync="dynamicSponsorRegexPattern">
+							<div class="input-container">
+								<label for="dynamicSponsorRegexPattern">__MSG_dynamicSponsorRegexPattern__</label>
+								<input id="dynamicSponsorRegexPattern" class="option-text-box" type="text" />
+								<button class="text-change-set">__MSG_save__</button>
+								<button class="text-change-reset">__MSG_reset__</button>
+							</div>
+								<div class="small-description">__MSG_dynamicSponsorRegexPatternDescription__</div>
+						</div>
+
+						<div data-type="toggle" data-sync="dynamicSpaceSponsorBlocker">
+							<br />
+							<div class="switch-container">
+								<label class="switch">
+									<input id="dynamicSpaceSponsorBlocker" type="checkbox" checked>
+									<span class="slider round"></span>
+								</label>
+								<label class="switch-label" for="dynamicSpaceSponsorBlocker">
+									__MSG_dynamicSpaceSponsorBlocker__
+								</label>
+							</div>
+							<div class="small-description">__MSG_dynamicSpaceSponsorBlockerDescription__</div>
+						</div>
+
+						<div data-type="toggle" data-sync="dynamicSponsorWhitelistedChannels">
+							<br />
+							<div class="switch-container">
+								<label class="switch">
+									<input id="dynamicSponsorWhitelistedChannels" type="checkbox" checked>
+									<span class="slider round"></span>
+								</label>
+								<label class="switch-label" for="dynamicSponsorWhitelistedChannels">
+									__MSG_dynamicSponsorWhitelistedChannels__
+								</label>
+							</div>
+							<div class="small-description">__MSG_dynamicSponsorWhitelistedChannelsDescription__</div>
+						</div>
+					</div>
+				</div>
+
 				<div data-type="toggle" data-sync="muteSegments">
 					<div class="switch-container">
 						<label class="switch">

diff --git a/src/components/options/CategoryChooserComponent.tsx b/src/components/options/CategoryChooserComponent.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import * as CompileConfig from "../../../config.json";
 import { Category } from "../../types";
-import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
+import {CategorySkipOptionsComponent, DynamicSponsorHideOptionsComponent} from "./CategorySkipOptionsComponent";
 
 export interface CategoryChooserProps {}
 
@@ -59,4 +59,54 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
     }
 }
 
-export default CategoryChooserComponent;
+class DynamicSponsorChooserComponent extends React.Component<CategoryChooserProps, CategoryChooserState> {
+    constructor(props: CategoryChooserProps) {
+        super(props);
+
+        // Setup state
+        this.state = {};
+    }
+
+    render(): React.ReactElement {
+        return (
+            <table id="categoryChooserTable" className="categoryChooserTable">
+                <tbody>
+                    <tr id={"CategoryOptionsRow"} className="categoryTableElement categoryTableHeader">
+                        <th id={"CategoryOptionName"}>
+                            {chrome.i18n.getMessage("category")}
+                        </th>
+
+                        <th id={"CategoryHideOption"} className="HideOption">
+                            {chrome.i18n.getMessage("skipOptionDynamicSponsor")}
+                        </th>
+
+                        <th id={"CategoryColorOption"} className="ColorOption">
+                            {chrome.i18n.getMessage("colorDynamicSponsor")}
+                        </th>
+                    </tr>
+
+
+                    {this.getCategorySkipOptions()}
+                </tbody>
+            </table>
+        );
+    }
+
+    getCategorySkipOptions(): JSX.Element[] {
+        const elements: JSX.Element[] = [];
+        const list = ["dynamicSponsor_sponsor", "dynamicSponsor_forward_sponsor", "dynamicSponsor_suspicion_sponsor"]
+
+        for (const category of list) {
+            elements.push(
+                <DynamicSponsorHideOptionsComponent
+                    category={category as Category}
+                    key={category}
+                ></DynamicSponsorHideOptionsComponent>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export {CategoryChooserComponent, DynamicSponsorChooserComponent}