ウェブページにhtmlを丸ごと追加したい(content

vue.jsを使用してchromeの拡張機能を作成しています。

##実現したいこと
・ウェブページにvueで作成した簡単なフォームを追加したい
(vueで作成したフォームをhtmlに渡して、htmlごとウェブページに追加したい)

とりあえず一通り書いてみたのですが画面には何も反映されず困っています。

manifestjson
1{
2  "manifest_version": 2,    
3  "name": "*****",  
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
1// 簡単なテキストボックスを作成
2vue.component('sample', {
3  data() {
4    return {
5      value: ''
6    }
7  },
8  template: `
9  <div>
10    <input type="text" v-model="value" />
11    <div>{{ value }}</div>
12  </div>
13  `
14})
15
16new Vue({
17  el: '#app'
18})
19
20// ここでhtmlを取得してウェブページの任意の場所に追加したいが方法が全く分からない(そもそも実現可能なのかすら…)
21
22var iFrame = document.createElement('iframe')
23iFrame.src = chrome.extension.getURL('form.html')
24iFrame.setAttribute('class', 'input-form')
25document.body.insertBefore (iFrame, document.body.firstChild);

formhtml
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="ja"> 
5  </head>
6  <body>
7
8    <div id="app">
9      <sample></sample>
10    </div>
11
12    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
13    <script src="main.js"></script>
14    
15  </body>
16</html>

stylecss
1.input-form {
2  position: fixed;
3  left: 20px;
4  top: 20px;
5  z-index: 100000;
6}

##備考
全てのファイルは同じ階層にあります。

##追記
以下、使用した参考資料になります
フォーム入力バインディング
 Chromeコンテンツスクリプトを使用して複雑なHTMLを追加する
 CDNを使ってVue.jsをする方法

m.ts10806

2021/01/07 01:12

Vue本体が動作すること（HelloWorldレベル）は確認されたのでしょうか。ここに至るまでにやったこと、参考にした記事などご提示ください

tenshinhan

2021/01/07 01:38

コメントしてくださりありがとうございます今、一度確認してみたところHello Worldレベルで失敗していました… また参考資料については追記の部分に追加させていただきました

m.ts10806

2021/01/07 01:47

では、本題はそこができてから、ですね。

tenshinhan

2021/01/07 03:51

main.js var app = new Vue({ el: "#app", data:{ message: "Vue.js" } }) htmlを取得してウェブページに追加 var iFrame = document.createElement('iframe') iFrame.src = chrome.extension.getURL('form.html') iFrame.setAttribute('class', 'input-form') document.body.insertBefore (iFrame, document.body.firstChild); form.html <!DOCTYPE html> <html> <head> <meta charset="ja"> </head> <body> <div id="app"> <input v-model="message" placeholder="edit me"> <p>{{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html> 少し書き換えてhtmlにvueの内容を反映させることはできましたが、拡張機能を更新してhtmlを追加する部分はまだうまくいきません（追加したいhtmlの内容が何も表示されない）。やはりvar iFrame ... 以降に問題があるのでしょうか。もし可能でしたらアドバイス等いただけると大変嬉しいです、よろしくお願いいたします。

m.ts10806

2021/01/07 03:54 編集

拡張機能への対応はまた次の話かと思いますので、ひとまず自身でやったことを回答として記載し、いったん解決済みとされては？

tenshinhan

2021/01/07 04:04

なるほど、そうしたいと思います。ありがとうございます。