将外部 Javascript 和 CSS 文件包含到另一个站点的 DOM 中答案

【问题标题】：Include external Javascript and CSS files into another site's DOM将外部 Javascript 和 CSS 文件包含到另一个站点的 DOM 中
【发布时间】：2012-05-11 02:21:15
【问题描述】：

我正在尝试将像 StackExchange 在其网站上使用的 Markdown 编辑器加载到带有 Bookmarklet 或浏览器扩展的 Forrst.com 网站。

基本上看起来我需要...

将 CSS 文件加载到页面中
https://raw.github.com/ujifgc/pagedown/master/demo/browser/demo.css
将这 3 个 Javascript 文件加载到页面中

https://raw.github.com/ujifgc/pagedown/master/Markdown.Converter.js
https://raw.github.com/ujifgc/pagedown/master/Markdown.Editor.js
https://raw.github.com/ujifgc/pagedown/master/Markdown.Sanitizer.js
将此 Javascript 加载到页面中以使其全部运行...

//Load and run this code in the page...
// Find and replace the curent textarea with the HTML we
// need for our markdown editor to work 
var htmlToReplace = ' \
  <div class="wmd-panel"> \
    <div id="wmd-button-bar"></div> \
      <textarea class="wmd-input" id="wmd-input" name="description"></textarea> \
  </div> \
  <div id="wmd-preview" class="wmd-panel wmd-preview"></div>';

$("#description").replaceWith(htmlToReplace)

//Run the markdown editor scripts
(function () {
    var converter1 = Markdown.getSanitizingConverter();
    var editor1 = new Markdown.Editor(converter1);
    editor1.run();
})();

如果有人可以为我指明如何完成此类事情的正确方向，我相信我会非常感谢您的帮助

【问题讨论】：

您对浏览器扩展进行了哪些研究或尝试？
@jfriend00 到目前为止，我想我已经找到了所有合适的 javascript 来使它工作，只需将我所有的 JS 文件都包含到页面中
就像我说的，当您研究浏览器扩展的工作原理时，您对此有什么具体问题？我们不适合做你的研究员。您进行研究，查看有关浏览器扩展如何工作的文档，如果您无法弄清楚，您可以根据所学提出更具体的问题。
您要为哪种浏览器制作扩展程序？
@jfriend 很抱歉，但问题是如何将 Javascript 文件加载到外部站点，无论扩展名与否，我知道这也可以通过小书签实现，我仍然在研究一切的过程中，这个问题是其中的一部分

标签： javascript bookmarklet

【解决方案1】：

如果您想将它们加载到不同的网站，Chrome 为您提供了一种非常简单的方法，它们被称为Content Scripts。

基本上，您创建一个extension，并在manifest.json 文件中指定要加载的javascript 文件，并提供它们在项目目录中的相对路径。

所以，步骤如下：

创建文件夹
在该文件夹中，将您要在浏览器中加载的文件放置
创建一个manifest.json 文件，并在其中指定您要加载的 CSS 和 JavaScript 文件（并提供它们到清单的相对路径文件）。
在 Chrome 中，install the local extension
继续测试，每当您对文件进行更改时，请确保您在安装文件的页面 (chrome://extensions) 上单击“重新加载扩展”，以便重新加载文件并自行重新启动。

这是否至少回答了您的部分问题？

【讨论】：