Question

我正在尝试加载Markdown编辑器，就像StackExchange在其网站上使用的那样，使用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();
})();

如果有人能指出我如何完成这样的事情的正确方向，我相信我可能会非常感谢你的帮助

Answer 1

如果您想将它们加载到其他网站，Chrome会为您提供一种非常简单的方法，并将其称为Content Scripts。

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

所以，以下是步骤：

创建文件夹
在该文件夹中，将您要加载的文件放在浏览器中
创建一个manifest.json文件，然后在其中指定您要加载的 CSS 和 JavaScript 文件（并提供相关路径清单文件）。
在Chrome中，install the local extension
继续测试，每当您对文件进行更改时，请确保在（chrome://extensions）安装的页面上单击“重新加载扩展”，以便重新加载文件并重新启动。 / LI>
这是否至少回答了部分问题？

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

1 个答案: