akirattii/background.js

## background.js
console.log("background");

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({
    'url': chrome.extension.getURL('popup.html')
  }, function(tab) {
    // Tab opened.
  });
});

## content.js
console.log("content script");

## manifest.json
{
  "name": "example-app",
  "version": "0.1.0",
  "manifest_version": 2,
  "description": "a example extension for Chrome",
  "author": "Taro TANAKA <tanaka@example.com> (http://www.example.com)",
  "permissions": [
    "<all_urls>",
    "storage",
    "unlimitedStorage",
    "tabs",
    "activeTab",
    "http://*/*",
    "https://*/*"
  ],
  "icons": {
    "128": "./icon.png"
  },
  "web_accessible_resources": [
    "./icon.png"
  ],
  "content_scripts": [{
    "all_frames": true,
    "matches": ["<all_urls>"],
    "js": ["./content.js"],
    "css": []
  }],
  "background": {
    "scripts": ["./background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": "./icon.png"
  },
  "update_url": "https://clients2.google.com/service/update2/crx"
}

## popup.html
<html>

<head>
  <meta charset="utf-8">
  <title>example-app</title>
  <script src="extlib/js/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="extlib/css/bootstrap.min.css">
  <script src="extlib/js/bootstrap.min.js"></script>
</head>

<body class="container mx-auto pb-4">
  <div>Hello chrome extension!<div>
  <script src="popup.js"></script>
</body>

</html>

## popup.js
console.log("popup script");

if ($) {
  console.log("jquery available!");
}

// here can use jQuery...
	console.log("background");

	chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.create({
	'url': chrome.extension.getURL('popup.html')
	}, function(tab) {
	// Tab opened.
	});
	});
	{
	"name": "example-app",
	"version": "0.1.0",
	"manifest_version": 2,
	"description": "a example extension for Chrome",
	"author": "Taro TANAKA <tanaka@example.com> (http://www.example.com)",
	"permissions": [
	"<all_urls>",
	"storage",
	"unlimitedStorage",
	"tabs",
	"activeTab",
	"http:///",
	"https:///"
	],
	"icons": {
	"128": "./icon.png"
	},
	"web_accessible_resources": [
	"./icon.png"
	],
	"content_scripts": [{
	"all_frames": true,
	"matches": ["<all_urls>"],
	"js": ["./content.js"],
	"css": []
	}],
	"background": {
	"scripts": ["./background.js"],
	"persistent": false
	},
	"browser_action": {
	"default_icon": "./icon.png"
	},
	"update_url": "https://clients2.google.com/service/update2/crx"
	}