Netflixでマウスを動かしてもプレイヤーUI非表示のままにするChrome拡張機能作成

各配信サイトを見るとき必ず、自作の拡張機能を作って、マウスを動かしたときにシークバーが表示されないようにしているのだが

(以下の拡張機能をほかのサイト用に作っている)
github.com





Netflixの場合、動的にサイトが更新されていて、非表示属性が付いたタグをhtml要素につけてもすぐその要素が削除されてしまうので、困っていた。




最近、どうやらfirefoxには非表示にする拡張機能があるということに気が付いた。

github.com




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://*/"
    ]
  }


Netflix.css(適用しているcss)

.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;
}