0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

自分用TamperMonkey Test1

Posted at

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など)。
スクリプトを保存し、どのサイトでも動作することを確認します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?