@include *://localhost:8000/*;

dummy.json

{
  "gists": [
    {
      "id": "69901fd5fa48cb0d03f5f3bcf48c9f63",
      "include": "*://localhost:8000/*",
      "files": [
        {
          "name": "hexo-demo",
          "ext": "css",
          "url": "https://cdn.rawgit.com/tennisonchan/69901fd5fa48cb0d03f5f3bcf48c9f63/raw/b71ce90920ded75b477513de11baafd0ed6aed6a/hexo-demo.css"
        },
        {
          "name": "hexo-demo",
          "ext": "html",
          "url": "https://cdn.rawgit.com/tennisonchan/69901fd5fa48cb0d03f5f3bcf48c9f63/raw/f58e4ff8d9b18582a16d7d89395f310442c5c5ec/hexo-demo.html"
        },
        {
          "name": "hexo-demo",
          "ext": "js",
          "url": "https://cdn.rawgit.com/tennisonchan/69901fd5fa48cb0d03f5f3bcf48c9f63/raw/791cba6a139bd395034eb74bc650e9dd8009f549/hexo-demo.js"
        }
      ]
    },
    {
      "id": "09f4d4ec05bf810edbfca82de1891fe0",
      "include": "*://*.facebook.com/*",
      "files": [
        {
          "name": "hexo-test-csp",
          "ext": "js",
          "url": "https://cdn.rawgit.com/tennisonchan/09f4d4ec05bf810edbfca82de1891fe0/raw/3032dea46924a1b273ee49ec1ce95eac8875e849/hexo-test-csp.js"
        }
      ]
    }
  ]
}

hexo-demo.css

#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color: #f5f5f5;
  float: left;
  height: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

hexo-demo.html

<script type="x-tmpl-mustache" id="hello-world-1">
  <div class='hexo-message'>
    <span >Hexo message {{ msg }}</span>
  </div>
</script>

<script type="x-tmpl-mustache" id="hexo-demo-sidebar">
<div class="hexo-example">
<div id="accordion" role="tablist">
  {{#gists}}
    <div class="card">
      <div class="card-header" role="tab" id="heading-{{id}}">
        <h5 class="mb-0">
          <a data-toggle="collapse" href="#collapse-{{id}}" aria-expanded="false" aria-controls="collapse-{{id}}">
            {{include}}
          </a>
          <span class="badge">{{files.length}}</span>
        </h5>
      </div>

      <div id="collapse-{{id}}" class="collapse" role="tabpanel" aria-labelledby="heading-{{id}}" data-parent="#accordion">
        <div class="card-body">
          <ul class="list-group">
            {{#files}}
              <li class="list-group-item">{{name}}.{{ext}}</li>
            {{/files}}
          </ul>
        </div>
      </div>
    </div>
  {{/gists}}
</div>
</div>
</script>

hexo-demo.js

hexo.ready(function() {
  console.log('It works!');
  console.log('hexo', hexo);
  hexo.sayHelloWorld('Hexo Demo');

  $.getJSON('https://cdn.rawgit.com/tennisonchan/69901fd5fa48cb0d03f5f3bcf48c9f63/raw/69e215125656f76a6dc4daec6cae1389b6c1b646/dummy.json')
    .then(function(json){
      // templating using hello-world.html
      let compiled = hexo.template('#hexo-demo-sidebar');
      $('body').append(complied(json));
    });
});

console.log('registered ready')
console.log(document.currentScript);