Jiant.ing

Quick Start for Development ​

1. Install Jiant.ing Browser Extension: ​

  • ✅ Jiant.ing extension is the only required. Everything is in it.
  • ❌ No need other installation or dependencies.
  • ❌ No need server deployment.

TIP

If without coding skill, just skip to guide for everyone. Use templates to make feeds in no code way.

2. Customize ​

With HTML, CSS, Javascript, you can customize scripts to track any page you need.

On target page, via right-click context menu "Monitor page with Jiant.ing", you can open a side panel with a form for custom script.

3. Inspect Page ​

Click "Inspect" in right-click context menu on left window. You can inspect DOM of the target page.

html
<!-- Example HTML of target page in left window -->
<html>
  <body>
    <ul class="example-list">
      <li>
        <a href="https://example.com/story001">
          <div class="title">To listen to all sides makes one wise</div>
        </a>
      </li>
      
      <li>
        <a href="https://example.com/story002">
          <div class="title">To be partial to one side makes one confused.</div>
        </a>
      </li>
    </ul>
  </body>
</html>

4. Writing Script ​

Script in side panel is for parsing and interacting with the page content you need.

At the end of script, it is required to return an object with a key: items.

  • If you know some HTML, CSS, Javascript, you can parse the HTML up there with:
js
// script in side panel 
const dom = await jiant.get.dom() // get the document copy of target page
let items = []
let elements = dom.querySelectorAll('.ul.example li')
for (const e of elements) {
  let title = e.querySelector('div.title').textContent
  let link = e.querySelector('a').href
  items.push({
    title: title,
    link: link
  })
}
console.log(items)
// console output: 
// [
//   { title: 'To listen to all sides makes one wise',
//     link: 'https://example.com/story001' },
//   { title: 'To be partial to one side makes one confused.',
//     link: 'https://example.com/story002' }
// ]
return { items: items }

5. Debugging ​

You can use console.log in script when debugging.

Right click on side panel, then click context menu "Inspect" to open console popup, then check debugging info there.

  • If you know some jQuery or cheerio, you can parse the HTML up there with:
js
// script in side panel 
const $ = await jiant.get.$()
let items = $('ul.example-list li').toArray().map(e=>({
  title: $(e).find('div.title').text(),
  link: $(e).find('a').attr('href')
}))
console.log(items)
return { items }