mirror of
https://github.com/Polaris-Entertainment/bytefy.git
synced 2026-04-09 09:29:39 +00:00
Merge pull request #6 from Myxelium/Add-chrome-extension-&-rename-parent
Add chrome extension & rename parent
This commit is contained in:
GitHub
12
.github/workflows/build.yml
vendored
12
.github/workflows/build.yml
vendored
@@ -41,12 +41,12 @@ jobs:
|
||||
|
||||
- name: Install Angular Dependencies
|
||||
run: |
|
||||
cd ./tools
|
||||
cd ./bytefy.webapp
|
||||
npm install --force
|
||||
|
||||
- name: Build Angular App
|
||||
run: |
|
||||
cd ./tools
|
||||
cd ./bytefy.webapp
|
||||
ng build --configuration production --output-path=dist
|
||||
|
||||
- name: Upload Artifacts
|
||||
@@ -59,7 +59,7 @@ jobs:
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: angular-artifacts
|
||||
path: ./tools/dist
|
||||
path: ./bytefy.webapp/dist
|
||||
|
||||
deploy:
|
||||
runs-on: self-hosted # Ensure your self-hosted runner is configured
|
||||
@@ -76,15 +76,15 @@ jobs:
|
||||
uses: actions/download-artifact@v3
|
||||
with:
|
||||
name: angular-artifacts
|
||||
path: ./tools/dist
|
||||
path: ./bytefy.webapp/dist
|
||||
|
||||
- name: Check Output Files
|
||||
run: |
|
||||
dir ./output/dotnet
|
||||
dir ./tools/dist
|
||||
dir ./bytefy.webapp/dist
|
||||
|
||||
- name: Copy .NET Publish Files to IIS Server
|
||||
run: |
|
||||
xcopy ".\output\dotnet\*" "C:\inetpub\applications\bytefy.image" /s /i /y
|
||||
xcopy ".\tools\dist\browser\*" "C:\inetpub\wwwroot\bytefy" /s /i /y
|
||||
xcopy ".\bytefy.webapp\dist\browser\*" "C:\inetpub\wwwroot\bytefy" /s /i /y
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
let lastIsEAN13 = false;
|
||||
let lastIsEAN8 = false;
|
||||
|
||||
document.addEventListener("selectionchange", () => {
|
||||
const selection = window.getSelection().toString().trim();
|
||||
const isEAN13 = /^\d{12,13}$/.test(selection);
|
||||
const isEAN8 = /^\d{7}$/.test(selection);
|
||||
|
||||
if (isEAN13 || isEAN8) {
|
||||
if (isEAN13 !== lastIsEAN13 || isEAN8 !== lastIsEAN8) {
|
||||
chrome.runtime.sendMessage({
|
||||
type: "updateContextMenu",
|
||||
isEAN13: isEAN13,
|
||||
isEAN8: isEAN8
|
||||
});
|
||||
lastIsEAN13 = isEAN13;
|
||||
lastIsEAN8 = isEAN8;
|
||||
}
|
||||
} else {
|
||||
if (lastIsEAN13 || lastIsEAN8) {
|
||||
chrome.runtime.sendMessage({
|
||||
type: "updateContextMenu",
|
||||
isEAN13: false,
|
||||
isEAN8: false
|
||||
});
|
||||
lastIsEAN13 = false;
|
||||
lastIsEAN8 = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
BIN
bytefy.browser.extensions/Qr-Barcode.chrome/icons/icon128.png
Normal file
BIN
bytefy.browser.extensions/Qr-Barcode.chrome/icons/icon128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
bytefy.browser.extensions/Qr-Barcode.chrome/icons/icon16.png
Normal file
BIN
bytefy.browser.extensions/Qr-Barcode.chrome/icons/icon16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 867 B |
BIN
bytefy.browser.extensions/Qr-Barcode.chrome/icons/icon32.png
Normal file
BIN
bytefy.browser.extensions/Qr-Barcode.chrome/icons/icon32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
bytefy.browser.extensions/Qr-Barcode.chrome/icons/icon48.png
Normal file
BIN
bytefy.browser.extensions/Qr-Barcode.chrome/icons/icon48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
2
bytefy.browser.extensions/Qr-Barcode.chrome/libraries/JsBarcode.all.min.js
vendored
Normal file
2
bytefy.browser.extensions/Qr-Barcode.chrome/libraries/JsBarcode.all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
bytefy.browser.extensions/Qr-Barcode.chrome/libraries/qrcode.min.js
vendored
Normal file
1
bytefy.browser.extensions/Qr-Barcode.chrome/libraries/qrcode.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
51
bytefy.browser.extensions/Qr-Barcode.chrome/manifest.json
Normal file
51
bytefy.browser.extensions/Qr-Barcode.chrome/manifest.json
Normal file
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "QR Code Generator",
|
||||
"version": "1.0",
|
||||
"description": "Generate a QR code from the current URL.",
|
||||
"permissions": [
|
||||
"activeTab",
|
||||
"contextMenus",
|
||||
"scripting"
|
||||
],
|
||||
"icons": {
|
||||
"16": "icons/icon16.png",
|
||||
"32": "icons/icon32.png",
|
||||
"48": "icons/icon48.png",
|
||||
"128": "icons/icon128.png"
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["<all_urls>"],
|
||||
"js": ["detect_ean_from_selection.js"]
|
||||
}
|
||||
],
|
||||
"background": {
|
||||
"service_worker": "service_worker.js"
|
||||
},
|
||||
"action": {
|
||||
"default_popup": "popup-menu/popup.html"
|
||||
},
|
||||
"content_security_policy": {
|
||||
"script-src": ["'self'"]
|
||||
},
|
||||
"web_accessible_resources": [{
|
||||
"resources": [
|
||||
"pages/qr-page/qr.html",
|
||||
"pages/qr-page/qr.js",
|
||||
"pages/barcode-page/barcode.html",
|
||||
"pages/barcode-page/barcode.js",
|
||||
"libraries/qrcode.min.js",
|
||||
"JsBarcode.all.min.js",
|
||||
"icons/icon16.png",
|
||||
"icons/icon32.png",
|
||||
"icons/icon48.png",
|
||||
"icons/icon128.png",
|
||||
"pages/page_styling.css",
|
||||
"service_worker.js",
|
||||
"detect_ean_from_selection.js",
|
||||
"manifest.json"
|
||||
],
|
||||
"matches": ["<all_urls>"]
|
||||
}]
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Barcode</title>
|
||||
<script src="../../libraries/JsBarcode.all.min.js"></script>
|
||||
<script src="barcode.js"></script>
|
||||
<link rel="stylesheet" href="../page_styling.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://bytefy.net">
|
||||
<img class="logotype" src="https://bytefy.net/assets/logo-full-orange-beta-vectorized.svg" alt="QR Code">
|
||||
</a>
|
||||
<div class="wrapper">
|
||||
<h3>Barcode <span id="type"></span></h3> <svg id="barcode"></svg>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<p>This extension is created by bytefy. For more online tools visit <a href="https://bytefy.net">bytefy.net</a></p>
|
||||
</footer>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const content = urlParams.get('content');
|
||||
const type = urlParams.get('type');
|
||||
generateBarcode(content, type);
|
||||
});
|
||||
|
||||
function generateBarcode(content, type) {
|
||||
if (type === "ean13") {
|
||||
JsBarcode("#barcode", content, { format: "EAN13" });
|
||||
document.getElementById("type").innerText = "EAN-13";
|
||||
} else if (type === "ean8") {
|
||||
JsBarcode("#barcode", content, { format: "EAN8" });
|
||||
document.getElementById("type").innerText = "EAN-8";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
html {
|
||||
background-color: #121212;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
}
|
||||
img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
.logotype{
|
||||
width: 140px;
|
||||
position: absolute;
|
||||
}
|
||||
#content {
|
||||
border: 1px solid rgb(52, 211, 153);
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
max-width: 500px;
|
||||
box-shadow: 0px 0px 10px 0px rgb(52, 211, 153);
|
||||
}
|
||||
#qrcode {
|
||||
margin: 10px;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #f0f0f0;
|
||||
padding: 10px;
|
||||
}
|
||||
a {
|
||||
color: #f0f0f0;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>QR Code</title>
|
||||
<script src="../../libraries/qrcode.min.js"></script>
|
||||
<link rel="stylesheet" href="../page_styling.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://bytefy.net">
|
||||
<img class="logotype" src="https://bytefy.net/assets/logo-full-orange-beta-vectorized.svg" alt="QR Code">
|
||||
</a>
|
||||
<div class="wrapper">
|
||||
<div id="qrcode"></div>
|
||||
|
||||
<div id="content">
|
||||
</div>
|
||||
</div>
|
||||
<script src="qr.js"></script>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<p>This extension is created by bytefy. For more online tools visit <a href="https://bytefy.net">bytefy.net</a></p>
|
||||
</footer>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const content = urlParams.get('content');
|
||||
generateQRCode(content);
|
||||
});
|
||||
|
||||
function generateQRCode(content) {
|
||||
let qrCodeElement = document.getElementById('qrcode');
|
||||
qrCodeElement.innerHTML = "";
|
||||
|
||||
document.getElementById('content').innerText = content;
|
||||
new QRCode(qrCodeElement, {
|
||||
text: content,
|
||||
width: 256,
|
||||
height: 256,
|
||||
correctLevel: QRCode.CorrectLevel.L
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Current url as QR code</title>
|
||||
<script src="../libraries/qrcode.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 10px;
|
||||
background-color: #121212;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
a {
|
||||
color: #f0f0f0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.logotype{
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img class="logotype" src="https://bytefy.net/assets/logo-full-orange-beta-vectorized.svg" alt="QR Code">
|
||||
<p>More online tools at: <a href="https://bytefy.net" target="_blank">bytefy.net</a></p>
|
||||
<h3>Current url as QR code</h3>
|
||||
<div id="qrcode"></div>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
|
||||
let url = tabs[0].url;
|
||||
generateQRCode(url);
|
||||
});
|
||||
});
|
||||
|
||||
function generateQRCode(url) {
|
||||
let qrCodeElement = document.getElementById('qrcode');
|
||||
qrCodeElement.innerHTML = "";
|
||||
|
||||
if (typeof QRCode !== 'undefined') {
|
||||
new QRCode(qrCodeElement, {
|
||||
text: url,
|
||||
width: 256,
|
||||
height: 256
|
||||
});
|
||||
} else {
|
||||
console.error("QRCode library is not loaded.");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
chrome.runtime.onInstalled.addListener(() => {
|
||||
chrome.contextMenus.create({
|
||||
id: "generateQRCodeFromText",
|
||||
title: "Generate QR code from selected text",
|
||||
contexts: ["selection"]
|
||||
});
|
||||
|
||||
chrome.contextMenus.create({
|
||||
id: "generateQRCodeFromLink",
|
||||
title: "Generate QR code from link",
|
||||
contexts: ["link"]
|
||||
});
|
||||
|
||||
chrome.contextMenus.create({
|
||||
id: "generateQRCodeFromImage",
|
||||
title: "Generate QR code from image",
|
||||
contexts: ["image"]
|
||||
});
|
||||
|
||||
chrome.contextMenus.create({
|
||||
id: "generateEAN13Barcode",
|
||||
title: "Generate EAN-13 Barcode",
|
||||
contexts: ["selection"],
|
||||
enabled: false
|
||||
});
|
||||
|
||||
chrome.contextMenus.create({
|
||||
id: "generateEAN8Barcode",
|
||||
title: "Generate EAN-8 Barcode",
|
||||
contexts: ["selection"],
|
||||
enabled: false
|
||||
});
|
||||
});
|
||||
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
console.log(message)
|
||||
if (message.type === "updateContextMenu") {
|
||||
chrome.contextMenus.update("generateEAN13Barcode", { enabled: message.isEAN13 });
|
||||
chrome.contextMenus.update("generateEAN8Barcode", { enabled: message.isEAN8 });
|
||||
}
|
||||
});
|
||||
|
||||
chrome.contextMenus.onClicked.addListener((info, tab) => {
|
||||
let content = "";
|
||||
let type = "";
|
||||
let document = "";
|
||||
|
||||
if (info.menuItemId === "generateQRCodeFromText" && info.selectionText) {
|
||||
content = info.selectionText;
|
||||
document = "qr";
|
||||
} else if (info.menuItemId === "generateQRCodeFromLink" && info.linkUrl) {
|
||||
content = info.linkUrl;
|
||||
document = "qr";
|
||||
} else if (info.menuItemId === "generateQRCodeFromImage" && info.srcUrl) {
|
||||
content = info.srcUrl;
|
||||
document = "qr";
|
||||
} else if (info.menuItemId === "generateEAN13Barcode" && info.selectionText) {
|
||||
content = info.selectionText;
|
||||
type = "ean13";
|
||||
document = "barcode";
|
||||
} else if (info.menuItemId === "generateEAN8Barcode" && info.selectionText) {
|
||||
content = info.selectionText;
|
||||
type = "ean8";
|
||||
document = "barcode";
|
||||
}
|
||||
|
||||
if (content) {
|
||||
chrome.tabs.create({
|
||||
url: chrome.runtime.getURL(`pages/${document}-page/${document}.html?content=${encodeURIComponent(content)}${type ? `&type=${type}` : ''}`)
|
||||
});
|
||||
}
|
||||
});
|
||||
BIN
bytefy.browser.extensions/doc/assets/example.gif
Normal file
BIN
bytefy.browser.extensions/doc/assets/example.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
bytefy.browser.extensions/doc/assets/example2.gif
Normal file
BIN
bytefy.browser.extensions/doc/assets/example2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
72
bytefy.browser.extensions/readme.md
Normal file
72
bytefy.browser.extensions/readme.md
Normal file
@@ -0,0 +1,72 @@
|
||||
# QR and Barcode Generator Chrome Extension
|
||||
|
||||
## Overview
|
||||
|
||||
This Chrome extension allows users to generate QR codes and barcodes (EAN-13 and EAN-8) from selected text, links, or images. The extension provides context menu options for generating these codes and displays them in a new tab.
|
||||
|
||||
## Features
|
||||
|
||||
- Generate QR codes from selected text, links, or images.
|
||||
- Generate EAN-13 and EAN-8 barcodes from selected text.
|
||||
- Context menu options dynamically enable or disable based on the selected text.
|
||||
|
||||
## Architecture
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[User Interaction] -->|Select Text/Link/Image| B[Context Menu]
|
||||
B -->|Generate QR Code| C[QR Code Page]
|
||||
B -->|Generate Barcode| D[Barcode Page]
|
||||
C --> E[Display QR Code]
|
||||
D --> F[Display Barcode]
|
||||
G[Service Worker] -->|Update Context Menu| B
|
||||
H[Content Script] -->|Detect EAN| G
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
### Service Worker (`service_worker.js`)
|
||||
|
||||
- **Context Menu Creation**: Creates context menu items for generating QR codes and barcodes.
|
||||
- **Message Listener**: Listens for messages to update the context menu based on the selected text.
|
||||
- **Context Menu Click Handler**: Handles clicks on context menu items and opens the appropriate page to display the generated code.
|
||||
|
||||
### Content Script (`detect_ean_from_selection.js`)
|
||||
|
||||
- **Selection Change Listener**: Detects changes in the selected text and checks if it matches the EAN-13 or EAN-8 format.
|
||||
- **Message Sender**: Sends messages to the service worker to update the context menu based on the selected text.
|
||||
|
||||
### Popup Script (`popup.js`)
|
||||
|
||||
- **Generate QR Code**: Generates a QR code for the current tab's URL and displays it in the popup.
|
||||
|
||||
### QR Code Page Script (`qr.js`)
|
||||
|
||||
- **Generate QR Code**: Generates and displays a QR code based on the content passed in the URL parameters.
|
||||
|
||||
### Barcode Page Script (`barcode.js`)
|
||||
|
||||
- **Generate Barcode**: Generates and displays a barcode (EAN-13 or EAN-8) based on the content and type passed in the URL parameters.
|
||||
|
||||
|
||||
## Installation
|
||||
1. Installation
|
||||
2. Clone the repository.
|
||||
3. Load the extension in Chrome by navigating to edge://extensions/, brave://extensions/ or chrome://extensions/ and enabling "Developer mode".
|
||||
4. Click "Load unpacked" and select the extension directory.
|
||||
|
||||
## Usage
|
||||
|
||||
1. **Install the Extension**: Load the extension in Chrome.
|
||||
2. **Select Text/Link/Image**: Right-click on the selected text, link, or image.
|
||||
3. **Generate Code**: Choose the appropriate context menu option to generate a QR code or barcode.
|
||||
4. **View Code**: A new tab will open displaying the generated QR code or barcode.
|
||||
|
||||
## Dependencies
|
||||
|
||||
- **QRCode.js**: Library for generating QR codes.
|
||||
- **JsBarcode**: Library for generating barcodes.
|
||||
|
||||
# How it works:
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 640 KiB After Width: | Height: | Size: 640 KiB |
|
Before Width: | Height: | Size: 598 KiB After Width: | Height: | Size: 598 KiB |
|
Before Width: | Height: | Size: 589 KiB After Width: | Height: | Size: 589 KiB |
|
Before Width: | Height: | Size: 589 KiB After Width: | Height: | Size: 589 KiB |
|
Before Width: | Height: | Size: 547 KiB After Width: | Height: | Size: 547 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user