mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-11-10 09:07:45 +01:00
Merge pull request #1623 from mini-bomba/labels-on-thumbnails
Show Full-Video Labels on thumbnails
This commit is contained in:
Ajay Ramachandran
GitHub
commit
ef00e07647
13 changed files with 479 additions and 124 deletions
14
package-lock.json
generated
14
package-lock.json
generated
|
|
@ -27,7 +27,7 @@
|
|||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
"@ajayyy/maze-utils": "1.1.7",
|
||||
"@ajayyy/maze-utils": "1.1.10",
|
||||
"content-scripts-register-polyfill": "^4.0.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
|
|
@ -67,9 +67,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@ajayyy/maze-utils": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.7.tgz",
|
||||
"integrity": "sha512-qmakLnRnNJ/CAyDO9ey0ihn71YWoyZfRFxF78ylofA5A+ghBXg4cVVY92iKDN3pivtT2kouLiKDRWgazYKqrOQ==",
|
||||
"version": "1.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.10.tgz",
|
||||
"integrity": "sha512-JjiPEloeq5WjvjAWIpVEI+5g/pjKEJNtx/uM2ujp9oiT05+c9wKJGqIEC1kb8UeoXSkqrIaKy6b5RMabdy/dRQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
|
|
@ -13858,9 +13858,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@ajayyy/maze-utils": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.7.tgz",
|
||||
"integrity": "sha512-qmakLnRnNJ/CAyDO9ey0ihn71YWoyZfRFxF78ylofA5A+ghBXg4cVVY92iKDN3pivtT2kouLiKDRWgazYKqrOQ=="
|
||||
"version": "1.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.10.tgz",
|
||||
"integrity": "sha512-JjiPEloeq5WjvjAWIpVEI+5g/pjKEJNtx/uM2ujp9oiT05+c9wKJGqIEC1kb8UeoXSkqrIaKy6b5RMabdy/dRQ=="
|
||||
},
|
||||
"@ampproject/remapping": {
|
||||
"version": "2.2.0",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"description": "",
|
||||
"main": "background.js",
|
||||
"dependencies": {
|
||||
"@ajayyy/maze-utils": "1.1.7",
|
||||
"@ajayyy/maze-utils": "1.1.10",
|
||||
"content-scripts-register-polyfill": "^4.0.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
|
|
|
|||
|
|
@ -797,6 +797,10 @@
|
|||
"message": "Show an icon when a video is entirely an advertisement",
|
||||
"description": "Referring to the category pill that is now shown on videos that are entirely sponsor or entirely selfpromo"
|
||||
},
|
||||
"fullVideoLabelsOnThumbnails": {
|
||||
"message": "Show labels on video thumbnails as well",
|
||||
"description": "Referring to the category pill that is shown on videos that are entirely sponsor or entirely selfpromo on recommended videos, in searches or on the homepage."
|
||||
},
|
||||
"previewColor": {
|
||||
"message": "Unsubmitted Color",
|
||||
"description": "Referring to submissions that have not been sent to the server yet."
|
||||
|
|
|
|||
|
|
@ -803,3 +803,44 @@ input::-webkit-inner-spin-button {
|
|||
color: #fff;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
/* full video labels on thumbnails */
|
||||
.sponsorThumbnailLabel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em;
|
||||
border-radius: 2em;
|
||||
z-index: 1000;
|
||||
background-color: var(--category-color, #000);
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 0 8px 2px #333;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.sponsorThumbnailLabel.sponsorThumbnailLabelVisible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sponsorThumbnailLabel svg {
|
||||
height: 2em;
|
||||
fill: var(--category-text-color, #fff);
|
||||
}
|
||||
|
||||
.sponsorThumbnailLabel span {
|
||||
display: none;
|
||||
padding-left: 0.25em;
|
||||
font-size: 1.5em;
|
||||
color: var(--category-text-color, #fff);
|
||||
}
|
||||
|
||||
.sponsorThumbnailLabel:hover {
|
||||
border-radius: 0.25em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sponsorThumbnailLabel:hover span {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -696,4 +696,9 @@ svg {
|
|||
.upsellButton {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.no-bottom-border {
|
||||
border: none !important;
|
||||
padding: 20px 0px 0px 0px !important;
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-type="toggle" data-sync="fullVideoSegments">
|
||||
<div data-type="toggle" data-sync="fullVideoSegments" class="no-bottom-border">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input id="fullVideoSegments" type="checkbox" checked>
|
||||
|
|
@ -90,6 +90,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-type="toggle" data-sync="fullVideoLabelsOnThumbnails"
|
||||
data-dependent-on="fullVideoSegments">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input id="fullVideoLabelsOnThumbnails" type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<label class="switch-label" for="fullVideoLabelsOnThumbnails">
|
||||
__MSG_fullVideoLabelsOnThumbnails__
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-type="number-change" data-sync="minDuration">
|
||||
<label class="number-container">
|
||||
<span class="optionLabel">__MSG_minDuration__</span>
|
||||
|
|
|
|||
|
|
@ -115,28 +115,15 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
|
|||
}
|
||||
|
||||
private getColor(): string {
|
||||
const configObject = Config.config.barTypes["preview-" + this.state.segment?.category]
|
||||
|| Config.config.barTypes[this.state.segment?.category];
|
||||
return configObject?.color;
|
||||
// Handled by setCategoryColorCSSVariables() of content.ts
|
||||
const category = this.state.segment?.category;
|
||||
return `var(--sb-category-preview-${category}, var(--sb-category-${category}))`;
|
||||
}
|
||||
|
||||
private getTextColor(): string {
|
||||
const color = this.getColor();
|
||||
if (!color) return null;
|
||||
|
||||
const existingCalculatedColor = Config.config.categoryPillColors[this.state.segment?.category];
|
||||
if (existingCalculatedColor && existingCalculatedColor.lastColor === color) {
|
||||
return existingCalculatedColor.textColor;
|
||||
} else {
|
||||
const luminance = GenericUtils.getLuminance(color);
|
||||
const textColor = luminance > 128 ? "black" : "white";
|
||||
Config.config.categoryPillColors[this.state.segment?.category] = {
|
||||
lastColor: color,
|
||||
textColor
|
||||
};
|
||||
|
||||
return textColor;
|
||||
}
|
||||
// Handled by setCategoryColorCSSVariables() of content.ts
|
||||
const category = this.state.segment?.category;
|
||||
return `var(--sb-category-text-preview-${category}, var(--sb-category-text-${category}))`;
|
||||
}
|
||||
|
||||
private openTooltip(): void {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ interface SBConfig {
|
|||
disableSkipping: boolean;
|
||||
muteSegments: boolean;
|
||||
fullVideoSegments: boolean;
|
||||
fullVideoLabelsOnThumbnails: boolean;
|
||||
manualSkipOnFullVideo: boolean;
|
||||
trackViewCount: boolean;
|
||||
trackViewCountInPrivate: boolean;
|
||||
|
|
@ -258,6 +259,7 @@ const syncDefaults = {
|
|||
disableSkipping: false,
|
||||
muteSegments: true,
|
||||
fullVideoSegments: true,
|
||||
fullVideoLabelsOnThumbnails: true,
|
||||
manualSkipOnFullVideo: false,
|
||||
trackViewCount: true,
|
||||
trackViewCountInPrivate: true,
|
||||
|
|
|
|||
|
|
@ -43,11 +43,17 @@ import { StorageChangesObject } from "@ajayyy/maze-utils/lib/config";
|
|||
import { findValidElement } from "@ajayyy/maze-utils/lib/dom"
|
||||
import { getHash, HashedValue } from "@ajayyy/maze-utils/lib/hash";
|
||||
import { generateUserID } from "@ajayyy/maze-utils/lib/setup";
|
||||
import { setThumbnailListener, updateAll } from "@ajayyy/maze-utils/lib/thumbnailManagement";
|
||||
import { labelThumbnails, setupThumbnailPageLoadListener } from "./utils/thumbnails";
|
||||
import * as documentScript from "../dist/js/document.js";
|
||||
|
||||
const utils = new Utils();
|
||||
|
||||
// Hack to get the CSS loaded on permission-based sites (Invidious)
|
||||
utils.wait(() => Config.isReady(), 5000, 10).then(addCSS);
|
||||
utils.wait(() => Config.isReady(), 5000, 10).then(() => {
|
||||
// Hack to get the CSS loaded on permission-based sites (Invidious)
|
||||
addCSS();
|
||||
setCategoryColorCSSVariables();
|
||||
});
|
||||
|
||||
const skipBuffer = 0.003;
|
||||
|
||||
|
|
@ -106,8 +112,11 @@ setupVideoModule({
|
|||
updatePreviewBar();
|
||||
updateVisibilityOfPlayerControlsButton();
|
||||
},
|
||||
resetValues
|
||||
resetValues,
|
||||
documentScript
|
||||
}, () => Config);
|
||||
setThumbnailListener(labelThumbnails);
|
||||
setupThumbnailPageLoadListener();
|
||||
|
||||
//the video id of the last preview bar update
|
||||
let lastPreviewBarUpdate: VideoID;
|
||||
|
|
@ -332,6 +341,13 @@ function contentConfigUpdateListener(changes: StorageChangesObject) {
|
|||
case "categorySelections":
|
||||
sponsorsLookup();
|
||||
break;
|
||||
case "barTypes":
|
||||
setCategoryColorCSSVariables();
|
||||
break;
|
||||
case "fullVideoSegments":
|
||||
case "fullVideoLabelsOnThumbnails":
|
||||
updateAll();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2466,4 +2482,25 @@ function checkForPreloadedSegment() {
|
|||
Config.config.unsubmittedSegments[getVideoID()] = sponsorTimesSubmitting;
|
||||
Config.forceSyncUpdate("unsubmittedSegments");
|
||||
}
|
||||
}
|
||||
|
||||
// Generate and inject a stylesheet that creates CSS variables with configured category colors
|
||||
function setCategoryColorCSSVariables() {
|
||||
let styleContainer = document.getElementById("sbCategoryColorStyle");
|
||||
if (!styleContainer) {
|
||||
styleContainer = document.createElement("style");
|
||||
styleContainer.id = "sbCategoryColorStyle";
|
||||
document.head.appendChild(styleContainer)
|
||||
}
|
||||
|
||||
let css = ":root {"
|
||||
for (const [category, config] of Object.entries(Config.config.barTypes)) {
|
||||
css += `--sb-category-${category}: ${config.color};`;
|
||||
|
||||
const luminance = GenericUtils.getLuminance(config.color);
|
||||
css += `--sb-category-text-${category}: ${luminance > 128 ? "black" : "white"};`;
|
||||
}
|
||||
css += "}";
|
||||
|
||||
styleContainer.innerText = css;
|
||||
}
|
||||
|
|
@ -331,7 +331,8 @@ class PreviewBar {
|
|||
const fullCategoryName = (unsubmitted ? 'preview-' : '') + category;
|
||||
bar.setAttribute('sponsorblock-category', fullCategoryName);
|
||||
|
||||
bar.style.backgroundColor = Config.config.barTypes[fullCategoryName]?.color;
|
||||
// Handled by setCategoryColorCSSVariables() of content.ts
|
||||
bar.style.backgroundColor = `var(--sb-category-${fullCategoryName})`;
|
||||
if (!this.onMobileYouTube) bar.style.opacity = Config.config.barTypes[fullCategoryName]?.opacity;
|
||||
|
||||
bar.style.position = "absolute";
|
||||
|
|
|
|||
131
src/utils/thumbnails.ts
Normal file
131
src/utils/thumbnails.ts
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
import { waitFor } from "@ajayyy/maze-utils";
|
||||
import { newThumbnails } from "@ajayyy/maze-utils/lib/thumbnailManagement";
|
||||
import { isOnInvidious, parseYouTubeVideoIDFromURL } from "@ajayyy/maze-utils/lib/video";
|
||||
import Config from "../config";
|
||||
import { getVideoLabel } from "./videoLabels";
|
||||
|
||||
export async function labelThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
|
||||
await Promise.all(thumbnails.map((t) => labelThumbnail(t)));
|
||||
}
|
||||
|
||||
export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLElement | null> {
|
||||
if (!Config.config?.fullVideoSegments || !Config.config?.fullVideoLabelsOnThumbnails) {
|
||||
hideThumbnailLabel(thumbnail);
|
||||
return null;
|
||||
}
|
||||
|
||||
const link = (isOnInvidious() ? thumbnail.parentElement : thumbnail.querySelector("#thumbnail")) as HTMLAnchorElement
|
||||
if (!link || link.nodeName !== "A" || !link.href) return null; // no link found
|
||||
const videoID = parseYouTubeVideoIDFromURL(link.href)?.videoID;
|
||||
if (!videoID) {
|
||||
hideThumbnailLabel(thumbnail);
|
||||
return null;
|
||||
}
|
||||
|
||||
const category = await getVideoLabel(videoID);
|
||||
if (!category) {
|
||||
hideThumbnailLabel(thumbnail);
|
||||
return null;
|
||||
}
|
||||
|
||||
const { overlay, text } = createOrGetThumbnail(thumbnail);
|
||||
|
||||
overlay.style.setProperty('--category-color', `var(--sb-category-preview-${category}, var(--sb-category-${category}))`);
|
||||
overlay.style.setProperty('--category-text-color', `var(--sb-category-text-preview-${category}, var(--sb-category-text-${category}))`);
|
||||
text.innerText = chrome.i18n.getMessage(`category_${category}`);
|
||||
overlay.classList.add("sponsorThumbnailLabelVisible");
|
||||
|
||||
return overlay;
|
||||
}
|
||||
|
||||
function getOldThumbnailLabel(thumbnail: HTMLImageElement): HTMLElement | null {
|
||||
return thumbnail.querySelector(".sponsorThumbnailLabel") as HTMLElement | null;
|
||||
}
|
||||
|
||||
function hideThumbnailLabel(thumbnail: HTMLImageElement): void {
|
||||
const oldLabel = getOldThumbnailLabel(thumbnail);
|
||||
if (oldLabel) {
|
||||
oldLabel.classList.remove("sponsorThumbnailLabelVisible");
|
||||
}
|
||||
}
|
||||
|
||||
function createOrGetThumbnail(thumbnail: HTMLImageElement): { overlay: HTMLElement; text: HTMLElement } {
|
||||
const oldElement = getOldThumbnailLabel(thumbnail);
|
||||
if (oldElement) {
|
||||
return {
|
||||
overlay: oldElement as HTMLElement,
|
||||
text: oldElement.querySelector("span") as HTMLElement
|
||||
};
|
||||
}
|
||||
|
||||
const overlay = document.createElement("div") as HTMLElement;
|
||||
overlay.classList.add("sponsorThumbnailLabel");
|
||||
// Disable hover autoplay
|
||||
overlay.addEventListener("pointerenter", (e) => {
|
||||
e.stopPropagation();
|
||||
thumbnail.dispatchEvent(new PointerEvent("pointerleave", { bubbles: true }));
|
||||
});
|
||||
overlay.addEventListener("pointerleave", (e) => {
|
||||
e.stopPropagation();
|
||||
thumbnail.dispatchEvent(new PointerEvent("pointerenter", { bubbles: true }));
|
||||
});
|
||||
|
||||
const icon = createSBIconElement();
|
||||
const text = document.createElement("span");
|
||||
overlay.appendChild(icon);
|
||||
overlay.appendChild(text);
|
||||
thumbnail.appendChild(overlay);
|
||||
|
||||
return {
|
||||
overlay,
|
||||
text
|
||||
};
|
||||
}
|
||||
|
||||
function createSBIconElement(): SVGSVGElement {
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svg.setAttribute("viewBox", "0 0 565.15 568");
|
||||
const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
|
||||
use.setAttribute("href", "#SponsorBlockIcon");
|
||||
svg.appendChild(use);
|
||||
return svg;
|
||||
}
|
||||
|
||||
|
||||
// Inserts the icon svg definition, so it can be used elsewhere
|
||||
function insertSBIconDefinition() {
|
||||
const container = document.createElement("span");
|
||||
|
||||
// svg from /public/icons/PlayerStartIconSponsorBlocker.svg, with useless stuff removed
|
||||
container.innerHTML = `
|
||||
<svg viewBox="0 0 565.15 568" style="display: none">
|
||||
<defs>
|
||||
<g id="SponsorBlockIcon">
|
||||
<path d="M282.58,568a65,65,0,0,1-34.14-9.66C95.41,463.94,2.54,300.46,0,121A64.91,64.91,0,0,1,34,62.91a522.56,522.56,0,0,1,497.16,0,64.91,64.91,0,0,1,34,58.12c-2.53,179.43-95.4,342.91-248.42,437.3A65,65,0,0,1,282.58,568Zm0-548.31A502.24,502.24,0,0,0,43.4,80.22a45.27,45.27,0,0,0-23.7,40.53c2.44,172.67,91.81,330,239.07,420.83a46.19,46.19,0,0,0,47.61,0C453.64,450.73,543,293.42,545.45,120.75a45.26,45.26,0,0,0-23.7-40.54A502.26,502.26,0,0,0,282.58,19.69Z"/>
|
||||
<path d="M 284.70508 42.693359 A 479.9 479.9 0 0 0 54.369141 100.41992 A 22.53 22.53 0 0 0 42.669922 120.41992 C 45.069922 290.25992 135.67008 438.63977 270.83008 522.00977 A 22.48 22.48 0 0 0 294.32031 522.00977 C 429.48031 438.63977 520.08047 290.25992 522.48047 120.41992 A 22.53 22.53 0 0 0 510.7793 100.41992 A 479.9 479.9 0 0 0 284.70508 42.693359 z M 220.41016 145.74023 L 411.2793 255.93945 L 220.41016 366.14062 L 220.41016 145.74023 z "/>
|
||||
</g>
|
||||
</defs>
|
||||
</svg>`;
|
||||
document.body.appendChild(container.children[0]);
|
||||
}
|
||||
|
||||
export function setupThumbnailPageLoadListener(): void {
|
||||
const onLoad = () => {
|
||||
insertSBIconDefinition();
|
||||
|
||||
// Label thumbnails on load if on Invidious (wait for variable initialization before checking)
|
||||
waitFor(() => isOnInvidious() !== null).then(() => {
|
||||
if (isOnInvidious()) newThumbnails();
|
||||
});
|
||||
};
|
||||
|
||||
if (document.readyState === "complete") {
|
||||
onLoad();
|
||||
} else {
|
||||
window.addEventListener("load", onLoad);
|
||||
}
|
||||
|
||||
waitFor(() => Config.isReady(), 5000, 10).then(() => {
|
||||
newThumbnails();
|
||||
});
|
||||
}
|
||||
65
src/utils/videoLabels.ts
Normal file
65
src/utils/videoLabels.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { Category, VideoID } from "../types";
|
||||
import { getHash } from "@ajayyy/maze-utils/lib/hash";
|
||||
import Utils from "../utils";
|
||||
import { logWarn } from "./logger";
|
||||
|
||||
const utils = new Utils();
|
||||
|
||||
export interface LabelCacheEntry {
|
||||
timestamp: number;
|
||||
videos: Record<VideoID, Category>;
|
||||
}
|
||||
|
||||
const labelCache: Record<string, LabelCacheEntry> = {};
|
||||
const cacheLimit = 1000;
|
||||
|
||||
async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry | null> {
|
||||
// Check cache
|
||||
const cachedEntry = labelCache[hashPrefix];
|
||||
if (cachedEntry) {
|
||||
return cachedEntry;
|
||||
}
|
||||
|
||||
const response = await utils.asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}`);
|
||||
if (response.status !== 200) {
|
||||
// No video labels or server down
|
||||
labelCache[hashPrefix] = {
|
||||
timestamp: Date.now(),
|
||||
videos: {},
|
||||
};
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = JSON.parse(response.responseText);
|
||||
|
||||
const newEntry: LabelCacheEntry = {
|
||||
timestamp: Date.now(),
|
||||
videos: Object.fromEntries(data.map(video => [video.videoID, video.segments[0].category])),
|
||||
};
|
||||
labelCache[hashPrefix] = newEntry;
|
||||
|
||||
if (Object.keys(labelCache).length > cacheLimit) {
|
||||
// Remove oldest entry
|
||||
const oldestEntry = Object.entries(labelCache).reduce((a, b) => a[1].timestamp < b[1].timestamp ? a : b);
|
||||
delete labelCache[oldestEntry[0]];
|
||||
}
|
||||
|
||||
return newEntry;
|
||||
} catch (e) {
|
||||
logWarn(`Error parsing video labels: ${e}`);
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function getVideoLabel(videoID: VideoID): Promise<Category | null> {
|
||||
const prefix = (await getHash(videoID, 1)).slice(0, 3);
|
||||
const result = await getLabelHashBlock(prefix);
|
||||
|
||||
if (result) {
|
||||
return result.videos[videoID] ?? null;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -25,99 +25,168 @@ const edgeLanguages = [
|
|||
"zh_CN"
|
||||
]
|
||||
|
||||
module.exports = env => ({
|
||||
entry: {
|
||||
popup: path.join(__dirname, srcDir + 'popup.ts'),
|
||||
background: path.join(__dirname, srcDir + 'background.ts'),
|
||||
content: path.join(__dirname, srcDir + 'content.ts'),
|
||||
options: path.join(__dirname, srcDir + 'options.ts'),
|
||||
help: path.join(__dirname, srcDir + 'help.ts'),
|
||||
permissions: path.join(__dirname, srcDir + 'permissions.ts'),
|
||||
document: path.join(__dirname, srcDir + 'document.ts'),
|
||||
upsell: path.join(__dirname, srcDir + 'upsell.ts')
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, '../dist/js'),
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
name: 'vendor',
|
||||
chunks: "initial"
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
// disable type checker for user in fork plugin
|
||||
transpileOnly: true,
|
||||
configFile: env.mode === "production" ? "tsconfig-production.json" : "tsconfig.json"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js']
|
||||
},
|
||||
plugins: [
|
||||
// fork TS checker
|
||||
new ForkTsCheckerWebpackPlugin(),
|
||||
// exclude locale files in moment
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
|
||||
|
||||
module.exports = env => {
|
||||
const documentScriptBuild = webpack({
|
||||
entry: {
|
||||
document: {
|
||||
import: path.join(__dirname, srcDir + 'document.ts'),
|
||||
},
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, '../dist/js'),
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
from: '.',
|
||||
to: '../',
|
||||
globOptions: {
|
||||
ignore: ['manifest.json'],
|
||||
},
|
||||
context: './public',
|
||||
filter: async (path) => {
|
||||
if (path.match(/\/_locales\/.+/)) {
|
||||
if (env.browser.toLowerCase() === "edge"
|
||||
&& !edgeLanguages.includes(path.match(/(?<=\/_locales\/)[^/]+(?=\/[^/]+$)/)[0])) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const data = await fs.promises.readFile(path);
|
||||
const parsed = JSON.parse(data.toString());
|
||||
|
||||
return parsed.fullName && parsed.Description;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
transform(content, path) {
|
||||
if (path.match(/\/_locales\/.+/)) {
|
||||
const parsed = JSON.parse(content.toString());
|
||||
if (env.browser.toLowerCase() === "safari") {
|
||||
parsed.fullName.message = parsed.fullName.message.match(/^.+(?= -)/)?.[0] || parsed.fullName.message;
|
||||
if (parsed.fullName.message.length > 50) {
|
||||
parsed.fullName.message = parsed.fullName.message.slice(0, 47) + "...";
|
||||
}
|
||||
|
||||
parsed.Description.message = parsed.Description.message.match(/^.+(?=\. )/)?.[0] || parsed.Description.message;
|
||||
if (parsed.Description.message.length > 80) {
|
||||
parsed.Description.message = parsed.Description.message.slice(0, 77) + "...";
|
||||
}
|
||||
}
|
||||
|
||||
return Buffer.from(JSON.stringify(parsed));
|
||||
}
|
||||
|
||||
return content;
|
||||
test: /\.tsx?$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
resourceQuery: { not: [/raw/] },
|
||||
options: {
|
||||
// disable type checker for user in fork plugin
|
||||
transpileOnly: true,
|
||||
configFile: env.mode === "production" ? "tsconfig-production.json" : "tsconfig.json"
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js']
|
||||
},
|
||||
plugins: [
|
||||
// Don't fork TS checker for document script to speed up
|
||||
// new ForkTsCheckerWebpackPlugin()
|
||||
]
|
||||
});
|
||||
|
||||
class DocumentScriptCompiler {
|
||||
currentWatching = null;
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {webpack.Compiler} compiler
|
||||
*/
|
||||
apply(compiler) {
|
||||
compiler.hooks.beforeCompile.tapAsync({ name: 'DocumentScriptCompiler' }, (compiler, callback) => {
|
||||
if (env.WEBPACK_WATCH) {
|
||||
let first = true;
|
||||
if (!this.currentWatching) {
|
||||
this.currentWatching = documentScriptBuild.watch({}, () => {
|
||||
if (first) {
|
||||
first = false;
|
||||
callback();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
documentScriptBuild.close(() => {
|
||||
documentScriptBuild.run(() => {
|
||||
callback();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
entry: {
|
||||
popup: path.join(__dirname, srcDir + 'popup.ts'),
|
||||
background: path.join(__dirname, srcDir + 'background.ts'),
|
||||
content: path.join(__dirname, srcDir + 'content.ts'),
|
||||
options: path.join(__dirname, srcDir + 'options.ts'),
|
||||
help: path.join(__dirname, srcDir + 'help.ts'),
|
||||
permissions: path.join(__dirname, srcDir + 'permissions.ts'),
|
||||
upsell: path.join(__dirname, srcDir + 'upsell.ts')
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, '../dist/js'),
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
resourceQuery: { not: [/raw/] },
|
||||
options: {
|
||||
// disable type checker for user in fork plugin
|
||||
transpileOnly: true,
|
||||
configFile: env.mode === "production" ? "tsconfig-production.json" : "tsconfig.json"
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /js\/document\.js$/,
|
||||
type: 'asset/source'
|
||||
}
|
||||
]
|
||||
}),
|
||||
new BuildManifest({
|
||||
browser: env.browser,
|
||||
pretty: env.mode === "production",
|
||||
stream: env.stream
|
||||
}),
|
||||
new configDiffPlugin()
|
||||
]
|
||||
});
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js']
|
||||
},
|
||||
plugins: [
|
||||
// Prehook to start building document script before normal build
|
||||
new DocumentScriptCompiler(),
|
||||
// fork TS checker
|
||||
new ForkTsCheckerWebpackPlugin(),
|
||||
// exclude locale files in moment
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: '.',
|
||||
to: '../',
|
||||
globOptions: {
|
||||
ignore: ['manifest.json'],
|
||||
},
|
||||
context: './public',
|
||||
filter: async (path) => {
|
||||
if (path.match(/\/_locales\/.+/)) {
|
||||
if (env.browser.toLowerCase() === "edge"
|
||||
&& !edgeLanguages.includes(path.match(/(?<=\/_locales\/)[^/]+(?=\/[^/]+$)/)[0])) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const data = await fs.promises.readFile(path);
|
||||
const parsed = JSON.parse(data.toString());
|
||||
|
||||
return parsed.fullName && parsed.Description;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
transform(content, path) {
|
||||
if (path.match(/\/_locales\/.+/)) {
|
||||
const parsed = JSON.parse(content.toString());
|
||||
if (env.browser.toLowerCase() === "safari") {
|
||||
parsed.fullName.message = parsed.fullName.message.match(/^.+(?= -)/)?.[0] || parsed.fullName.message;
|
||||
if (parsed.fullName.message.length > 50) {
|
||||
parsed.fullName.message = parsed.fullName.message.slice(0, 47) + "...";
|
||||
}
|
||||
|
||||
parsed.Description.message = parsed.Description.message.match(/^.+(?=\. )/)?.[0] || parsed.Description.message;
|
||||
if (parsed.Description.message.length > 80) {
|
||||
parsed.Description.message = parsed.Description.message.slice(0, 77) + "...";
|
||||
}
|
||||
}
|
||||
|
||||
return Buffer.from(JSON.stringify(parsed));
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
}
|
||||
]
|
||||
}),
|
||||
new BuildManifest({
|
||||
browser: env.browser,
|
||||
pretty: env.mode === "production",
|
||||
stream: env.stream
|
||||
}),
|
||||
new configDiffPlugin()
|
||||
]
|
||||
};
|
||||
};
|
||||
Loading…
Reference in a new issue