質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

Chromeブラウザで特定Webサイトでテキスト追加・編集をしたい

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 450

score 5

Chromeブラウザで特定Webサイトを開いたときにテキスト追加・編集をしたい

タイトルと同じなのですが、実現可能かどうかも含めて判断頂けると助かります。
(progateでHTML,CSS,Javascriptを少し触れていた程度です...)

経緯なのですが
特定のWebサービスで、私がアップロードした画像・動画やその他ファイルなどを探し選択してから、
内容に応じた発注をかけるような作業をしております。

サービス元の仕様で、ファイルアップロード後のファイル選択はプレビューで見て選択する方法しかないため
類似のプレビューがあると誤選択や判別に時間がかかったりで、現状よろしくありません。
そこで、下図のように画像プレビュー下部などに何のデータなのかを識別したいため
ページが表示された段階でテキストを追加出来れば...というのが今回の希望です。(詳細は後述します)
イメージ説明

試してみたこと

Chromeのデベロッパーツールから現在開いているページのソース書き換えが出来ることを最近知りまして、
HTMLソースだけではありますが、今回の相談内容を反映してみたところ上記画像のように反映されておりました。
(ページ更新でもちろん消えてしまいますが...)

デベロッパーツール上では以下の様に追加してました。
▼元ソース

<p><img src="https://~~~.jpg></p>
<p><Video data-id=A1234 src="https://~~~.mp4></video></p>

▼イメージソース

<p><img src="https://~~~.jpg><span>abcde.jpg</span></p>
<p><Video data-id=A1234 src="https://~~~.mp4></video><span>test.mp4</span></p>

この時にソースの中に、サービス元で管理しているIDとファイル名を見つけたので、
テキストを追加する際に、上記のIDかファイル名で表示するか、こちらで管理しているコードに置き換えて表示したいと考えています。

この操作を毎回するわけにもいかないので何とかChromeの拡張機能などにして
特定サイトを開いたら、例としてVideoタグの中にある「data-id」か「src属性」に
特定の文字列があれば、</video>の後ろにテキストが追加されるように仕込みたいところです。

そのほか

Chromeの拡張機能はHTML,CSS,Javascriptで作れると聞いていたのですが、
要望に近い機能はできますでしょうか?

類似のソフトやChromeの拡張機能などもしあれば、ご教授頂けますと助かります。

不足情報などがあれば追加いたします。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/08/28 00:42

    一度Chrome拡張の作り方を調べられてはいかがでしょう。現状の質問は「要望に近い機能はできますでしょうか?」なので「できるでしょう」としか回答できないと思います。

    キャンセル

  • ray88

    2019/08/29 04:06

    質問しながら要望に近いページがないかだけ探してたのでなかなか見つからずでした、
    Chromeの拡張機能の方でも、「Content Scriptの処理を何とかすればいいんだな」っていうイメージしかついてないので詳しく調べてみます!
    ありがとうございます!

    キャンセル

回答 3

checkベストアンサー

+1

tampermonkeyというアドオンを入れれば、特定のURLのページに対して自分が書いたJavaScriptを実行させることができます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/29 04:26

    このアドオンでいけそうな気がします!
    ただ自分で一から作らないといけないので、ソースを参考に作っていきたいと思います
    ありがとうございます!

    キャンセル

0

Chromeの拡張機能はHTML,CSS,Javascriptで作れると聞いていたのですが、
要望に近い機能はできますでしょうか?

できると思います。

類似のソフトやChromeの拡張機能などもしあれば、ご教授頂けますと助かります。 

ないと思います。(質問文の内容から、そのサイトに特化した作りになると思うので)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/29 04:22

    解決の可能性を見出したので、Chrome拡張機能を試していきます!
    ありがとうございます。

    キャンセル

0

https://kurochan-note.hatenablog.jp/entry/20110227/1298790614

ブックマークレットで行けそうな気がします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/29 04:17

    自分の環境が合ってないのか機能はしているみたいなのですが
    画像表示されていたところがエラー表示されてしまうようで、
    今回の目的からちょっと扱いが難しそうです。。
    文字列検索で別途使ってみます!
    ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る