Q&A
重複質問ではありませんか？
https://teratail.com/questions/314422
分からないこと
htmlを丸ごとウェブページの任意の箇所に追加する方法
chrome拡張機能を作成しています。
html自体をブラウザに表示させるとvueでの記述が反映された状態で表示されるのですが、拡張機能でhtmlを任意の箇所に追加することができません。(追加したいhtmlがウェブページには何も反映されていない状態)
manifestjson
1{ 2 "manifest_version": 2, 3 "name": "atten", 4 "version": "1", 5 6 "content_scripts": [ 7 { 8 "matches": ["https://google.com/*"], 9 "js": ["main.js"], 10 "css": ["style.css"] 11 } 12 ], 13 "icons": { 14 "128": "icon.png" 15 }, 16 "web_accessible_resources": ["form.html"] 17}
mainjs
1var app = new Vue({ 2 el: "#app", 3 data:{ 4 message: "Vue.js" 5 } 6}) 7//htmlを取得してウェブページに追加 8var iFrame = document.createElement('iframe') 9iFrame.src = chrome.extension.getURL('form.html') 10iFrame.setAttribute('class', 'input-form') 11document.body.prepend(iFrame)
form.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="ja"> 5 6 </head> 7 <body> 8 9 <div id="app"> 10 <input v-model="message" placeholder="edit me"> 11 <p>{{ message }}</p> 12 </div> 13 14 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> 15 <script type="text/javascript" src="main.js"></script> 16 </body> 17</html>
stylecss
1.input-form { 2 position: absolute; 3 left: 20px; 4 top: 20px; 5 z-index: 100000; 6}
##備考
全てのファイルは同じ階層にあります。
初歩的な質問で申し訳ありませんが、どうぞよろしくお願いします。
以下、参考にした資料になります。
フォーム入力バインディング
CDNを使ってVue.jsをする方法
Chromeコンテンツスクリプトを使用して複雑なHTMLを追加する
一旦修正できた部分を記述して解決済みにして別の質問をしてはどうかというアドバイスを頂いたため、そのようにした方が良いと判断して新しく質問を投稿してしまいました。
以後、気をつけたいと思います。ご注意してくださりありがとうございます。
あなたの回答
tips
プレビュー
