2024-04-17

ココフセンの代替案

英語学習の一環として読んでいたので分からなかった英単語に付箋を貼っていたのだが、付箋ってすぐなくすので、ココフセンというケースごと貼ることのできる付箋を愛用していた。

めちゃくちゃ好きな商品なのだが、冷静になると、4セット500円で高いなっていう思ってしまったので、代替案を試行錯誤するように。いろいろ3Ⅿの剥がせる糊などを試していたのだが（プラとの相性問題があって断念）、結局アラビックヤマト糊を付箋の束に塗って貼る方法に落ち着いた。

実際に使用して耐久性を確かめていく。

2024-04-13

オーメン：ザ・ファースト

日常パートがあるホラー映画。その日常パートが70年代のイタリアで結構雰囲気があって好きだった。ロケ地がエンドロール観た感じだとセルビア？非常に作りこまれていた。ああやってシスターってなるんだって結構ためになった。儀式などちゃんと描写していてちょっと格調高さみたいなものがあった。

怖さは事前警告ありでちょっと肩透かしを食らった感はあったが、PG12がよく分からなくなるようなぶっ飛んでるシーンはちゃんとあったので満足できた。

今年やってたエクソシストのリメイクも観ましたが、こっちも子供がキーになっていて、不登校の子供などの現実の問題が背景にあるのかなと思いながら見ていた。

普通に観れる映画だったなと。とんでもキリスト教ﾀﾞｲｽｷ。

あとブレナン神父を演じていたの「ザ・クリエイター」で低音ボイスが印象的だった軍人役と同じ人だと気づいた。ラルフ・イネソン　( ..)φﾒﾓﾒﾓ

2024-04-10

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