Skip to content

Instantly share code, notes, and snippets.

@mikoloism
Forked from akirattii/background.js
Last active June 4, 2021 15:03
Show Gist options
  • Save mikoloism/e6f620b4fc48db9e5be87f74c6716e07 to your computer and use it in GitHub Desktop.
Save mikoloism/e6f620b4fc48db9e5be87f74c6716e07 to your computer and use it in GitHub Desktop.
an example of chrome extension, which can be opened as new tab by click its browser icon.

Chrome Extension opener

an example of chrome extension, which can be opened as new tab by click its browser icon.

forked from @akirattii

Coding

1. popup.html

<html>
  <head>
    <meta charset="utf-8">
    <title>example-app</title>
  </head>
  
  <body class="container mx-auto pb-4">
      <div>Hello chrome extension!<div>
        
      <!-- extension require -->
      <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>
        
      <!-- import popup.js  -->
      <script src="popup.js"></script>
    </body>
</html>

2. popup.js

console.log(`[LOG] - popup.js`);

if ($) {
  console.log(`[LOG] - jquery-available`);
}

// here can use jQuery...

3. background.js

console.log(`[LOG] - background.js`);

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

4. content.js

console.log(`[LOG] - content.js`);

GAMIL | CODEPEN | GITHUB

{
"name": "example-app",
"version": "0.1.0",
"manifest_version": 2,
"description": "a example extension for Chrome",
"author": "Taro TANAKA <[email protected]> (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"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment