1.これは自分用です。コード等もテスト用なので参照しないでください。
以下は、CSSでスタイリングしたボックスを画面左端に追加し、ユーザーが指定した要素の内容をそのボックス内に表示するTampermonkeyスクリプトの例です。
// ==UserScript==
// @name Show Specific Element on Left Side
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Show specific content on the left side of the screen for any site.
// @author Your Name
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// ユーザーがターゲットにするCSSセレクタを指定(例: 特定の要素)
const targetSelector = 'h1'; // 任意のCSSセレクタ。たとえば、ページの<h1>タグの内容を取得します。
// ページの読み込みを待ってから実行
window.addEventListener('load', function() {
// ターゲット要素を取得
const targetElement = document.querySelector(targetSelector);
if (!targetElement) {
console.log('ターゲット要素が見つかりませんでした。');
return;
}
// 取得した要素のテキスト内容
const targetContent = targetElement.textContent;
// 左端に固定表示するための要素を作成
const displayBox = document.createElement('div');
displayBox.style.position = 'fixed';
displayBox.style.top = '10px';
displayBox.style.left = '10px';
displayBox.style.width = '300px';
displayBox.style.padding = '10px';
displayBox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
displayBox.style.color = 'white';
displayBox.style.fontSize = '14px';
displayBox.style.zIndex = '9999';
displayBox.style.borderRadius = '5px';
displayBox.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.3)';
displayBox.textContent = `ターゲットの内容: ${targetContent}`;
// ボディに追加
document.body.appendChild(displayBox);
});
})();
・スクリプトの動作
ページが読み込まれると、指定されたCSSセレクタ(この場合はh1)に一致する要素を取得します。
取得した要素が存在すれば、そのテキスト内容を画面左端に固定表示するボックスに表示します。
画面左端に固定され、他のページ内容がスクロールしてもボックスは常に見える状態になります。
・使用方法
Tampermonkeyにスクリプトを追加します。
targetSelectorの値を自分が表示したい要素に変更します(例: p、.my-class、#my-idなど)。
スクリプトを保存し、どのサイトでも動作することを確認します。