craigjperry2/ Browser Extension Example

## Browser Extension Example
Simple example of a browser extension to augment a vendor web-app for a poster on HN.

## README.md

      
    Raw
  

              README.md
            
          
    For https://news.ycombinator.com/item?id=28574733
Assumes nodejs / npm installed.

npx http-server
Assuming firefox (that's what i have locally just now - but the exact same idea works in chrome etc.):
2.1 Visit about:debugging
2.2 Click this firefox
2.3 Click load temporary extension
2.4 Select the manifest.json in this dir
Visit http://localhost:8080/ and see that the text box is populated with post titles from https://jsonplaceholder.typicode.com/posts


## extension-demo.js
console.log("Loaded extension when visiting http://127.0.0.1:8080");

function populate(items) {
    console.log(items);

    let datalist = document.createElement('datalist');
    datalist.id = 'titlesDatalist';
    items.forEach((i) => {
        let o = document.createElement('option');
        o.value = i;
        datalist.appendChild(o);
    });

    let titlesInput = document.getElementById('titles');
    titlesInput.setAttribute('list', 'titlesDatalist');
    titlesInput.appendChild(datalist);
}

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => json.map(({title}) => title))
  .then((titles) => populate(titles));


## index.html
<html>
  <head>
    <title>HN Example</title>
    <link rel="stylesheet" href="https://unpkg.com/mvp.css">
  </head>
  <body>
    <main>
      <h1>Vendor App</h1>
      <p>You can't change this vendor app's source code.</p>
      <section>
        <aside>
          <label class="label" for="titles">Resource Name</label>
          <input class="input" type="text" placeholder="Enter title" id="titles" />
          <button>Locate Resource</button>
        </aside>
      </section>
    </main>
  </body>
</html>

## manifest.json
{
  "name": "Example",
  "description": "Simple extension example for firefox",
  "homepage_url": "https://news.ycombinator.com/item?id=28574733",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["*://localhost/*", "*://127.0.0.1/*"],
      "js": ["extension-demo.js"]
    }
  ],
  "permissions": [
    "https://jsonplaceholder.typicode.com/posts"
  ]
}
	console.log("Loaded extension when visiting http://127.0.0.1:8080");

	function populate(items) {
	console.log(items);

	let datalist = document.createElement('datalist');
	datalist.id = 'titlesDatalist';
	items.forEach((i) => {
	let o = document.createElement('option');
	o.value = i;
	datalist.appendChild(o);
	});

	let titlesInput = document.getElementById('titles');
	titlesInput.setAttribute('list', 'titlesDatalist');
	titlesInput.appendChild(datalist);
	}

	fetch('https://jsonplaceholder.typicode.com/posts')
	.then((response) => response.json())
	.then((json) => json.map(({title}) => title))
	.then((titles) => populate(titles));
	<html>
	<head>
	<title>HN Example</title>
	<link rel="stylesheet" href="https://unpkg.com/mvp.css">
	</head>
	<body>
	<main>
	<h1>Vendor App</h1>
	<p>You can't change this vendor app's source code.</p>
	<section>
	<aside>
	<label class="label" for="titles">Resource Name</label>
	<input class="input" type="text" placeholder="Enter title" id="titles" />
	<button>Locate Resource</button>
	</aside>
	</section>
	</main>
	</body>
	</html>
	{
	"name": "Example",
	"description": "Simple extension example for firefox",
	"homepage_url": "https://news.ycombinator.com/item?id=28574733",
	"version": "1.0",
	"manifest_version": 2,
	"content_scripts": [
	{
	"matches": ["://localhost/", "://127.0.0.1/"],
	"js": ["extension-demo.js"]
	}
	],
	"permissions": [
	"https://jsonplaceholder.typicode.com/posts"
	]
	}