他人のサイトにJSを埋め込む!?「ScriptAutoRunner」でいつも使うサイトをもっと便利に!!

今回は他人のサイトにJavaScriptを埋め込むことが出来る「ScriptAutoRunner」というchromeの拡張機能を紹介していきます!ちなみに埋め込むといっても自分のPCのchrome上でしか動かないのでクロスサイトスクリプティングなど悪いことは出来ないのでご了承ください(笑)

まずは何ができるの?

はじめに、まず何が出来るのかを把握しておきましょう!

まぁJavaScriptで出来ることなら何でも出来ますww

例えば、

  • 画像やリンクなどの要素の埋め込み
  • アニメーションの制御
  • 入力内容をクッキーやWebStrageに自動保存
  • などなどアイディア次第!

というわけで今回は要素の埋め込みを実際にやっていきたいと思います!

ScriptAutoRunnerを追加しよう!

まずは「ScriptAutoRunner」を追加しましょう!

こちらのサイトから「ScriptAutoRunner」をChromeの拡張機能に追加しましょう!

すると、Chromeの拡張機能の一覧に以下のようにカミナリっぽいマークが追加されるはずです。

このカミナリマークをクリックすると下のようなプルダウンが出るので、今度は歯車マークをクリックします。

すると、今度は別タブでページが開くので、あとはそこにScriptを書けばOKです!

実際にScriptを書いてみよう!

それでは実際にScriptを書いてみましょう!

今回は簡単にbodyタグの直下に四角いボックスをJSで設置してみましょう!

コードはこんな感じになります。

// 要素の作成
let box = document.createElement('div');
box.classList.add('kanoto_box')
box.innerHTML = 'box!!';

// スタイルの作成
let style = document.createElement('style');
style.innerHTML = '.kanoto_box{ width: 100px; padding: 10px; background: #aaa; text-align: center; }';


// bodyの子要素の先頭にbox追加
document.body.insertBefore(box, document.body.firstChild);

// bodyの子要素の先頭にstyle追加
document.body.insertBefore(style, document.body.firstChild);

このコードを入力エリアにコピペします。

さらに左側にあるコンセントみたいな所をクリックすればJSが発動できます!

実際にどこかのサイトに行ってリロードすればボックスが生成されてるはずです!

最後までありがとうございました~~!!