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.

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

Feat: Dynamic Sponsor Block #119

Merged
merged 1 commit into from
Jan 16, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions manifest/chrome-manifest-extra.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"matches": [
"https://*.bilibili.com/*"
],
"all_frames": false,
"all_frames": true,
"js": [
"./js/content.js"
],
Expand All @@ -37,7 +37,7 @@
"matches": [
"https://*.bilibili.com/*"
],
"all_frames": false,
"all_frames": true,
"js": [
"./js/document.js"
]
Expand Down
2 changes: 1 addition & 1 deletion manifest/firefox-manifest-extra.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"matches": [
"https://*.bilibili.com/*"
],
"all_frames": false,
"all_frames": true,
"js": [
"./js/content.js"
],
Expand Down
60 changes: 60 additions & 0 deletions public/_locales/en/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "标签颜色"
}
}
60 changes: 60 additions & 0 deletions public/_locales/zh_CN/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "标签颜色"
}
}
60 changes: 60 additions & 0 deletions public/_locales/zh_TW/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "標籤顏色"
}
}
38 changes: 38 additions & 0 deletions public/content.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
56 changes: 56 additions & 0 deletions public/options/options.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
54 changes: 52 additions & 2 deletions src/components/options/CategoryChooserComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}

Expand Down Expand Up @@ -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}
Loading
Loading