各配信サイトを見るとき必ず、自作の拡張機能を作って、マウスを動かしたときにシークバーが表示されないようにしているのだが
(以下の拡張機能をほかのサイト用に作っている)
github.com
Netflixの場合、動的にサイトが更新されていて、非表示属性が付いたタグをhtml要素につけてもすぐその要素が削除されてしまうので、困っていた。
最近、どうやらfirefoxには非表示にする拡張機能があるということに気が付いた。
firefoxの拡張機能をなんとか頑張ってChromeに移植することができた。おまけで、上の拡張機能はURLバー横のアイコンでオンオフを切り替えているのだが、Qのキーで切り替えられるようにした。悪戦苦闘の末なんとか作ることができた。正直、消してからしばらくたつと復活しなくなるバグがあるが、DIYできた快感の方が上回ってるから!
モジラのwikiにあるbrowserオブジェクトが
chromeだと"chromeオブジェクト"を使わないといけないのなどすごい勉強になったと思います。
以下がコード
background.js
const APPLICABLE_PROTOCOLS = ["http:", "https:"]; const PAGE = { UNKNOWN: 0, NETFLIX: 'Netflix', DISNEY: 'Disney' }; let enabled = {}; /* Get Theme: determines whether to use a light or dark theme */ let theme = 'dark'; async function getTheme() { let theme = 'dark'; return theme; } /* Toggle CSS: insert or remove the CSS. Update the page action's title and icon to reflect its state. */ function enableCSS(tab, page) { getTheme().then((theme) => { chrome.pageAction.setTitle({ tabId: tab.id, title: `Show ${page} UI` }); chrome.tabs.insertCSS({ file: "Netflix.css" }); enabled[tab.id] = true; }); } function disableCSS(tab, page) { getTheme().then((theme) => { chrome.pageAction.setTitle({ tabId: tab.id, title: `Hide ${page} UI` }); chrome.tabs.removeCSS({ file: "Netflix.css" }); delete enabled[tab.id]; }); } function toggleCSS(tab) { const page = urlMatch(tab.url); if (tab.id in enabled) { disableCSS(tab, page); } else { enableCSS(tab, page); } } chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.action === "toggleCSS") { chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { const currentTab = tabs[0]; toggleCSS(currentTab); sendResponse({ status: "success" }); }); return true; } }); /* Returns true only if the URL's protocol is in APPLICABLE_PROTOCOLS. Argument url must be a valid URL string. */ function protocolIsApplicable(url) { const protocol = (new URL(url)).protocol; return APPLICABLE_PROTOCOLS.includes(protocol); } function urlMatch(url) { if (/^https?:\/\/www\.netflix\.com\/?.*/.test(url)) { return PAGE.NETFLIX; } if (/^https?:\/\/www\.disneyplus\.com\/?.*/.test(url)) { return PAGE.DISNEY; } return PAGE.UNKNOWN; } /* Initialize the page action: set icon and title, then show. Only operates on tabs whose URL's protocol is applicable and url is Netflix or Disney. */ function initializePageAction(tab) { const page = urlMatch(tab.url); if (protocolIsApplicable(tab.url) && page != PAGE.UNKNOWN) { if (enabled[tab.id]) { enableCSS(tab, page); } else { disableCSS(tab, page); } chrome.pageAction.show(tab.id); } } /* When first loaded, initialize the page action for all tabs. */ chrome.tabs.query({}, function(tabs) { for (let tab of tabs) { if (tab.url?.startsWith("chrome://")) return undefined; initializePageAction(tab); } }); /* Each time a tab is updated, reset the page action for that tab. */ chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { // Resets the tab's status on a page refresh if (changeInfo.status == "loading") { delete enabled[tabId]; } initializePageAction(tab); });
content_script.js
function runContentScript() { // Listen for keypresses document.addEventListener('keydown', (event) => { const keyName = event.key; // On right arrow, wind 1 second forward // On z, hide or show the UI if (keyName === 'q') { chrome.runtime.sendMessage({ action: 'toggleCSS' }); } }); } runContentScript();
manifest.json
{ "name": "Hide Netflix UI", "version": "1.0", "description": "Hide/show Netflix video UI with 'q' ", "background": { "scripts": ["background.js"], "persistent": true } , "content_scripts": [ { "matches": ["*://*.netflix.com/*", "https://*.netflix.com/*"], "js": ["content_script.js"] } ], "manifest_version": 3, "page_action": { "browser_style": true }, "permissions": [ "activeTab", "tabs", "http://*/", "https://*/" ] }
.watch-video--bottom-controls-container { display: none !important; } .watch-video--flag-container { display: none !important; } .watch-video--back-container { display: none !important; } .watch-video--evidence-overlay-container { display: none !important; } .advisory-container { display: none !important; } .watch-video--advisory-container { display: none !important; } .watch-video .playback-notification { display: none !important; } .watch-video .watch-video--player-view { position: absolute !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border: none !important; }