クロムエクステンションを使用してウェブサイトのページにブートストラップモーダルを表示

Question

私の要件は現在のタブにウェブサイトをオーバーレイするブートストラップを表示することです。しかし、その動作はかなりバギーです。時々動作しますが、時にはクリックできません。

クロム拡張のBackground.jsページを使用してブートストラップライブラリとモーダルポップアップコードを注入しています。したがって、modal.js（Modalポップアップ）が挿入されるとすぐにポップアップが表示されます。

ユースケースごとに、ユーザーがブラウザのアクションボタンをクリックしたときに表示されるpopup.htmlのボタンをクリックしたときにポップアップを表示したいとします。

これは、ライブラリやmodal.js

chrome.tabs.insertCSS(null, { 
     file: "css/bootstrap.min.css" 
     }, function() { 
      if (chrome.extension.lastError) { 
       chrome.extension.lastError.message; 
       alert("We are sorry, but chrome reserved pages (new tab, extensions, etc) and chrome web store are not supported. Please try another page.") 
      } 

      chrome.tabs.executeScript(null, { 
       file: "js/lib/jquery.js" 
      }); 

      chrome.tabs.executeScript(null, { 
       file: "js/lib/bootstrap.min.js" 
      }); 

      chrome.tabs.executeScript(null, { 
       file: "js/modal.js" 
      }); 
     }); 

一つの詳細情報を注入するためのコードであり、この問題は、私は他のウェブサイト上で実行する場合にのみ起動します。このポップアップは、クロムの新しいタブページで実行するときれいに表示されます。

誰かが私に間違ったやり方をしているステップを教えてもらえますか？

Answer 1

これを試してみてください：script.js funcion.jsで

$(document).ready(function(){ 
    $("#btn").click(function(){ 
    chrome.tabs.executeScript(null, { file: 'js/funcion.js' });  
    window.close(); 
    }); 
}); 

でmanifest.jsonを

"permissions": ["tabs", "activeTab", "http://*/*", "https://*/*"], 

    "content_scripts": [ 
    { 
     "matches": ["<all_urls>"], 
     "css": ["css/bootstrap.min.css", "css/estilo.css"], 
     "js": ["js/jquery.min.js", "js/bootstrap.min.js", "js/script.js", "js/funcion.js"], 
     "run_at": "document_end" 
    } 
    ], 

で

$("#modal1").modal("show"); 

modal1がモーダルビルドでありますページの本文に追加するvar