如何在Chrome擴展中包含HTML和CSS文件？

我正在創建一個Chrome擴展。我有一個小的擴展，其中包括CSS，JavaScript和HTML文件。我想在任何網頁上運行這個擴展，但content_script只允許我運行一個腳本文件。當我添加css或html文件擴展名時，它不起作用。它不顯示我爲擴展程序創建的HTML頁面，只是script.js。我如何在content_script中添加HTML文件？如何在Chrome擴展中包含HTML和CSS文件？

這是我manifest.json文件：

{ 
    "manifest_version":2, 

    "name":"News Plugin", 
    "description": "This extension will show you the latest news with headlines and small description", 
    "version":"1.0", 


    "browser_action":{ 
    "default_icon":"news_icon.png", 
    "default_popup":"NewsApp.html" 
    }, 
    //"chrome_url_overrides":{ 
    //"newtab":"NewsApp.html" 
    //}, 

    "content_scripts":[ 
     { 
      "matches":["http://*/*","https://*/*"], 
      "js":["news.js"], 
      "html":["news.js"], 
      "css":["style.js"] 
     } 
    ], 

    "permissions":[ 
    "activeTab" 
    ] 
}

來源

2016-12-28 kapil joshi

爲什麼你的HTML和CSS文件具有'.js'擴展名？ – Barmar

你真的想爲JS和HTML使用同一個文件嗎？ – Barmar

抱歉，我只是在CSS和HTML文件中複製了.js擴展名。是的，我想在內容腳本中使用單個html文件（其中包括css和js參考文件）。 –

爲content_scripts財產的manifest.json規格見https://developer.chrome.com/extensions/content_scripts。 content_scripts中沒有"html"屬性。如果它確實允許注入HTML，它會在哪裏放置它，因爲原始頁面已經有了它自己的HTML？您只能添加Javascript和CSS。

如果要將HTML添加到頁面中，您需要在Javascript中使用DOM操作函數來執行此操作，該操作函數允許您指定新元素的位置。

來源

2016-12-28 17:15:31 Barmar

非常感謝你:) –

如何在Chrome擴展中包含HTML和CSS文件？

回答

相關問題