将外部Javascript和CSS文件包含到另一个站点的DOM中 [英] Include external Javascript and CSS files into another site's DOM

问题描述

我正在尝试将Markdown编辑器(如StackExchange在其网站上使用的一种)加载到具有Bookmarklet或Browser Extension的Forrst.com网站中.

I am trying to load a Markdown editor like the one StackExchange uses on it's site into the Forrst.com site with a Bookmarklet or Browser Extension.

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

Basically it looks like I need...

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

1. Load the CSS file into the Page
   https://raw.github.com/ujifgc/pagedown/master/demo/browser/demo.css

将这3个JavaScript文件加载到页面中

Load these 3 Javascript files into the page

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

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 this Javascript into the page to make it all run...

---

//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();
})();

---

如果任何人都可以为我指出如何完成这样的事情的正确方向，我相信我很可能会很感激您的帮助

---

If anyone could point me in the right direction on how to accomplish something like this, I believe it's possible I would really appreciate the help

推荐答案

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

If you'd like to load them into a different website, Chrome gives you a very easy way to do so, and they are called Content Scripts.

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

Essentially, you create an extension, and in your manifest.json file, you specify the javascript files you'd like to load, giving relative paths to where they are in your project's directory.

因此，请按以下步骤操作:

So, here are the steps:

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

1. create a folder
2. in that folder, place the files you'd like to load in the browser
3. create a manifest.json file, and in there, specify the CSS and JavaScript files you'd like to load in (and give their relative paths to the manifest file).
4. In Chrome, install the local extension
5. Keep on testing, and whenever you make a change to a file, make sure you click "reload extension" on the page you installed it at (chrome://extensions), so it reloads the files and restarts itself.

这至少回答了您的部分问题吗?

Does that answer at least part of your question?

这篇关于将外部Javascript和CSS文件包含到另一个站点的DOM中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！