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

Include external Javascript and CSS files into another site's DOM

本文关键字：站点 另一个 DOM Javascript 外部 CSS 文件包      更新时间：2023-09-26

我正在尝试将Markdown编辑器加载到带有书签或浏览器扩展的 Forrst.com 站点中，例如StackExchange在其站点上使用

的编辑器。

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

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

  2. 将这 3 个 Javascript 文件加载到页面中


    https://raw.github.com/ujifgc/pagedown/master/Markdown.Converter.js
    https://raw.github.com/ujifgc/pagedown/master/Markdown.Editor.jshttps://raw.github.com/ujifgc/pagedown/master/Markdown.Sanitizer.js

  3. 将此 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();
})();

如果有人能指出我如何完成这样的事情的正确方向，我相信我真的很感激你的帮助

如果您想将它们

加载到其他网站，Chrome 为您提供了一种非常简单的方法，它们称为内容脚本。

本质上，你创建一个扩展，并在你的manifest.json文件中，你指定你想要加载的javascript文件，给出它们在项目目录中位置的相对路径。

因此，以下是步骤：

  1. 创建文件夹
  2. 在该文件夹中，将要加载的文件放入浏览器中
  3. 创建一个manifest.json文件，并在其中指定要加载的 CSS 和 JavaScript 文件（并提供它们对清单文件的相对路径）。
  4. 在 Chrome 中，安装本地扩展程序
  5. 继续测试，每当您对文件进行更改时，请确保在安装它的页面上单击"重新加载扩展名"（chrome://extensions ），以便它重新加载文件并重新启动自身。

这至少回答了你的部分问题吗？

相关文章：