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.

<!-- 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:

// 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:

// 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 }