I'm developing a Chrome App which is a wrapper for the main app in webview. The webview sends Base64 encoded PDF as a message to the app and the app creates a hidden iframe, loads the PDF in to the frame and calls print on the frame.
This all works on my development machine (Win10, Chrome Beta v47) but does not work on any other machine or Chrome version I've tried. The iframe does not show the PDF so a blank page is shown in the print preview.
What can cause this? Is there some setting or permission which I might have enabled on my machine?
Here is a simplified Chrome App that I have used to reproduce the problem.
manifest.json
{
"manifest_version": 2,
"version": "2",
"name": "Print PDF test",
"app": {
"background": {
"scripts": ["main.js"]
}
},
"permissions": [
]
}
main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
innerBounds: {
width: 768,
height: 1024
}
});
});
index.html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Print PDF</title>
</head>
<body style="height: 100%">
</body>
<script src="app.js"></script>
</html>
app.js
function showPDF() {
var base64pdf = 'JVBERi0xLjIgDQol4uPP0w0KIA0KOSAwIG9iag0KPDwNCi9MZW5ndGggMTAgMCBSDQovRmlsdGVyIC9GbGF0ZURlY29kZSANCj4+DQpzdHJlYW0NCkiJzZDRSsMwFIafIO/we6eyZuckTZPtbtIWBi0UjYKQGxFbJmpliuLb26QM8X6CJBfJyf99ycmFF6xJagWrrMxzwJeCEMd+gFjWBC1dLPeCJFkbl/fTKfwnTqt1CK0xIZyEwFYZ2T+fwT8KnmIxUmJinNKJyUiyW7mZVEQ6I54m2K3ZzFiupvgPaee7JHFuZqyDvxuGBbZdu8D1y+7jYf+2e//C2KOJm9dxfEqqTHMRXZlR0hRJuKwZau6EJa+MOdjpYN/gprq8xVW7aRp0ZY162ySbktoWvxpPZULGxJLSr+G4UuX+QHrcl/rz/2eqvPgGPPWhqg0KZW5kc3RyZWFtDQplbmRvYmoNCjEwIDAgb2JqDQoyNDYNCmVuZG9iag0KNCAwIG9iag0KPDwNCi9UeXBlIC9QYWdlDQovUGFyZW50IDUgMCBSDQovUmVzb3VyY2VzIDw8DQovRm9udCA8PA0KL0YwIDYgMCBSIA0KL0YxIDcgMCBSIA0KPj4NCi9Qcm9jU2V0IDIgMCBSDQo+Pg0KL0NvbnRlbnRzIDkgMCBSDQo+Pg0KZW5kb2JqDQo2IDAgb2JqDQo8PA0KL1R5cGUgL0ZvbnQNCi9TdWJ0eXBlIC9UcnVlVHlwZQ0KL05hbWUgL0YwDQovQmFzZUZvbnQgL0FyaWFsDQovRW5jb2RpbmcgL1dpbkFuc2lFbmNvZGluZw0KPj4NCmVuZG9iag0KNyAwIG9iag0KPDwNCi9UeXBlIC9Gb250DQovU3VidHlwZSAvVHJ1ZVR5cGUNCi9OYW1lIC9GMQ0KL0Jhc2VGb250IC9Cb29rQW50aXF1YSxCb2xkDQovRmlyc3RDaGFyIDMxDQovTGFzdENoYXIgMjU1DQovV2lkdGhzIFsgNzUwIDI1MCAyNzggNDAyIDYwNiA1MDAgODg5IDgzMyAyMjcgMzMzIDMzMyA0NDQgNjA2IDI1MCAzMzMgMjUwIA0KMjk2IDUwMCA1MDAgNTAwIDUwMCA1MDAgNTAwIDUwMCA1MDAgNTAwIDUwMCAyNTAgMjUwIDYwNiA2MDYgNjA2IA0KNDQ0IDc0NyA3NzggNjY3IDcyMiA4MzMgNjExIDU1NiA4MzMgODMzIDM4OSAzODkgNzc4IDYxMSAxMDAwIDgzMyANCjgzMyA2MTEgODMzIDcyMiA2MTEgNjY3IDc3OCA3NzggMTAwMCA2NjcgNjY3IDY2NyAzMzMgNjA2IDMzMyA2MDYgDQo1MDAgMzMzIDUwMCA2MTEgNDQ0IDYxMSA1MDAgMzg5IDU1NiA2MTEgMzMzIDMzMyA2MTEgMzMzIDg4OSA2MTEgDQo1NTYgNjExIDYxMSAzODkgNDQ0IDMzMyA2MTEgNTU2IDgzMyA1MDAgNTU2IDUwMCAzMTAgNjA2IDMxMCA2MDYgDQo3NTAgNTAwIDc1MCAzMzMgNTAwIDUwMCAxMDAwIDUwMCA1MDAgMzMzIDEwMDAgNjExIDM4OSAxMDAwIDc1MCA3NTAgDQo3NTAgNzUwIDI3OCAyNzggNTAwIDUwMCA2MDYgNTAwIDEwMDAgMzMzIDk5OCA0NDQgMzg5IDgzMyA3NTAgNzUwIA0KNjY3IDI1MCAyNzggNTAwIDUwMCA2MDYgNTAwIDYwNiA1MDAgMzMzIDc0NyA0MzggNTAwIDYwNiAzMzMgNzQ3IA0KNTAwIDQwMCA1NDkgMzYxIDM2MSAzMzMgNTc2IDY0MSAyNTAgMzMzIDM2MSA0ODggNTAwIDg4OSA4OTAgODg5IA0KNDQ0IDc3OCA3NzggNzc4IDc3OCA3NzggNzc4IDEwMDAgNzIyIDYxMSA2MTEgNjExIDYxMSAzODkgMzg5IDM4OSANCjM4OSA4MzMgODMzIDgzMyA4MzMgODMzIDgzMyA4MzMgNjA2IDgzMyA3NzggNzc4IDc3OCA3NzggNjY3IDYxMSANCjYxMSA1MDAgNTAwIDUwMCA1MDAgNTAwIDUwMCA3NzggNDQ0IDUwMCA1MDAgNTAwIDUwMCAzMzMgMzMzIDMzMyANCjMzMyA1NTYgNjExIDU1NiA1NTYgNTU2IDU1NiA1NTYgNTQ5IDU1NiA2MTEgNjExIDYxMSA2MTEgNTU2IDYxMSANCjU1NiBdDQovRW5jb2RpbmcgL1dpbkFuc2lFbmNvZGluZw0KL0ZvbnREZXNjcmlwdG9yIDggMCBSDQo+Pg0KZW5kb2JqDQo4IDAgb2JqDQo8PA0KL1R5cGUgL0ZvbnREZXNjcmlwdG9yDQovRm9udE5hbWUgL0Jvb2tBbnRpcXVhLEJvbGQNCi9GbGFncyAxNjQxOA0KL0ZvbnRCQm94IFsgLTI1MCAtMjYwIDEyMzYgOTMwIF0NCi9NaXNzaW5nV2lkdGggNzUwDQovU3RlbVYgMTQ2DQovU3RlbUggMTQ2DQovSXRhbGljQW5nbGUgMA0KL0NhcEhlaWdodCA5MzANCi9YSGVpZ2h0IDY1MQ0KL0FzY2VudCA5MzANCi9EZXNjZW50IDI2MA0KL0xlYWRpbmcgMjEwDQovTWF4V2lkdGggMTAzMA0KL0F2Z1dpZHRoIDQ2MA0KPj4NCmVuZG9iag0KMiAwIG9iag0KWyAvUERGIC9UZXh0ICBdDQplbmRvYmoNCjUgMCBvYmoNCjw8DQovS2lkcyBbNCAwIFIgXQ0KL0NvdW50IDENCi9UeXBlIC9QYWdlcw0KL01lZGlhQm94IFsgMCAwIDYxMiA3OTIgXQ0KPj4NCmVuZG9iag0KMSAwIG9iag0KPDwNCi9DcmVhdG9yICgxNzI1LmZtKQ0KL0NyZWF0aW9uRGF0ZSAoMS1KYW4tMyAxODoxNVBNKQ0KL1RpdGxlICgxNzI1LlBERikNCi9BdXRob3IgKFVua25vd24pDQovUHJvZHVjZXIgKEFjcm9iYXQgUERGV3JpdGVyIDMuMDIgZm9yIFdpbmRvd3MpDQovS2V5d29yZHMgKCkNCi9TdWJqZWN0ICgpDQo+Pg0KZW5kb2JqDQozIDAgb2JqDQo8PA0KL1BhZ2VzIDUgMCBSDQovVHlwZSAvQ2F0YWxvZw0KL0RlZmF1bHRHcmF5IDExIDAgUg0KL0RlZmF1bHRSR0IgIDEyIDAgUg0KPj4NCmVuZG9iag0KMTEgMCBvYmoNClsvQ2FsR3JheQ0KPDwNCi9XaGl0ZVBvaW50IFswLjk1MDUgMSAxLjA4OTEgXQ0KL0dhbW1hIDAuMjQ2OCANCj4+DQpdDQplbmRvYmoNCjEyIDAgb2JqDQpbL0NhbFJHQg0KPDwNCi9XaGl0ZVBvaW50IFswLjk1MDUgMSAxLjA4OTEgXQ0KL0dhbW1hIFswLjI0NjggMC4yNDY4IDAuMjQ2OCBdDQovTWF0cml4IFswLjQzNjEgMC4yMjI1IDAuMDEzOSAwLjM4NTEgMC43MTY5IDAuMDk3MSAwLjE0MzEgMC4wNjA2IDAuNzE0MSBdDQo+Pg0KXQ0KZW5kb2JqDQp4cmVmDQowIDEzDQowMDAwMDAwMDAwIDY1NTM1IGYNCjAwMDAwMDIxNzIgMDAwMDAgbg0KMDAwMDAwMjA0NiAwMDAwMCBuDQowMDAwMDAyMzYzIDAwMDAwIG4NCjAwMDAwMDAzNzUgMDAwMDAgbg0KMDAwMDAwMjA4MCAwMDAwMCBuDQowMDAwMDAwNTE4IDAwMDAwIG4NCjAwMDAwMDA2MzMgMDAwMDAgbg0KMDAwMDAwMTc2MCAwMDAwMCBuDQowMDAwMDAwMDIxIDAwMDAwIG4NCjAwMDAwMDAzNTIgMDAwMDAgbg0KMDAwMDAwMjQ2MCAwMDAwMCBuDQowMDAwMDAyNTQ4IDAwMDAwIG4NCnRyYWlsZXINCjw8DQovU2l6ZSAxMw0KL1Jvb3QgMyAwIFINCi9JbmZvIDEgMCBSDQovSUQgWzw0NzE0OTUxMDQzM2RkNDg4MmYwNWY4YzEyNDIyMzczND48NDcxNDk1MTA0MzNkZDQ4ODJmMDVmOGMxMjQyMjM3MzQ+XQ0KPj4NCnN0YXJ0eHJlZg0KMjcyNg0KJSVFT0YNCg==';
var blobPdf = new Blob([base64ToUint8(base64pdf)], {
type: 'application/pdf;base64'
});
var pdfFrame = document.createElement('iframe');
pdfFrame.id = 'pdfFrame';
pdfFrame.style.width = "100%";
pdfFrame.style.height = "100%";
pdfFrame.src = URL.createObjectURL(blobPdf);
document.body.appendChild(pdfFrame);
}
function base64ToUint8(base64str) {
var binary = atob(base64str.replace(/\s/g, ''));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
view[i] = binary.charCodeAt(i);
}
return view;
}
document.addEventListener('DOMContentLoaded', function() {
showPDF();
});
I finally found the answer to my question.
I had checked the "Always allowed" checkbox for Chrome PDF Viewer in chrome://plugins/ on my development machine. That is why it was not working on other machines.
Related
input type="file" stopped working in Android Instagram in-app browser recently. It was working fine earlier. It still works fine in iOS. I also tested it in Facebook in-app browser which also works fine on both Android and iOS.
Here is my simple test codes.
<!DOCTYPE html>
<html>
<head>
<title>File Validation</title>
</head>
<body>
<p>
<input type="file" id="file" onchange="checkFileSize()" />
</p>
<p id="size"></p>
</body>
<script>
var checkFileSize = function() {
var input = document.getElementById('file');
if (input.files.length > 0) {
for (var i = 0; i < input.files.length; i++) {
var fsize = input.files[i].size;
var file = Math.round((fsize / 1024));
document.getElementById('size').innerHTML = '<b>' + file + '</b> KB';
}
}
}
</script>
</html>
It just prints the file size on selection of a file. I have also uploaded the html to my Amazon S3 for easier testing. Here is the page link - https://virtueplanet.s3.amazonaws.com/testfile/index.html
If you open the link in Instagram in-app browser and select a file from your phone then it always returns the file size as zero (0). I also tried to read the file using Filereader which also fails.
var input = document.getElementById('file');
if (input.files.length > 0) {
for (var i = 0; i < input.files.length; i++) {
var reader = new FileReader();
reader.onload = function(e) {
alert('Image loaded.');
}
reader.onerror = function() {
alert(reader.error.message);
}
reader.readAsDataURL(input.files[i]);
}
}
It appears to be bug in the recent Instagram App update for Android. Any help will be highly appreciated.
This question already has answers here:
onclick or inline script isn't working in extension
(5 answers)
Closed 5 years ago.
I am trying to create a Chrome extensions that perform an Autocomplete functio on an input field.
First please have a look and the function code on a normal HTML page
<!DOCTYPE html>
<html>
<head>
<title>Testing autocomplete</title>
<script>
var people = ['Fabio', 'Marco', 'Pietro', 'Kucio', 'Pato'];
function matchPeople(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return people.filter(function(person) {
if (person.match(reg)) {
return person;
}
});
}
function changeInput(val) {
var autoCompleteResult = matchPeople(val);
var text = "";
var i;
for (i = 0; i < autoCompleteResult.length; i++) {
text += autoCompleteResult[i] + "<br>";
}
document.getElementById("result").innerHTML = text;
}
</script>
</head>
<body>
<input type="text" onkeyup="changeInput(this.value)">
<div id="result"></div>
</body>
</html>
Now, if we run this code on any webpage it works just fine.
The issue I am having is to move the above functions in a Chrome Extension.
I have my manifest.json here:
{
"name": "AutoComplete UZ",
"version": "1.0",
"description": "Provides with a small popup window with the AutoComplete function with UZ internal emails.",
"browser_action": {
"default_popup": "popup.html",
"default_title": "UZ AutoComplete"
},
"content_scripts": [
{
"matches" : ["http://*/*", "https://*/*"],
"css": ["style.css"],
"js" : ["popup.js"]
}
],
"manifest_version": 2
}
My popup.html file here:
<!DOCTYPE html>
<html>
<head>
<title>UZ AutoComplete</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="popup.js"></script>
</head>
<body>
<h1>UZ AutoComplete</h1>
<h3>Type email address</h3>
<input id="amount" type="text" onkeyup="changeInput(this.value)" placeholder="your email">
<div id="result"></div>
</body>
</html>
and my popup.js file here:
var people = [
'Fabio',
'Marco',
'Pietro',
'Kucio',
'Pato'
];
function matchPeople(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return people.filter(function(person) {
if (person.match(reg)) {
return person;
}
});
}
function changeInput(val) {
var autoCompleteResult = matchPeople(val);
var text = "";
var i;
for (i = 0; i < autoCompleteResult.length; i++) {
text += autoCompleteResult[i] + "<br>";
}
document.getElementById("result").innerHTML = text;
}
If I pack the above files and create an Extension, the above code will not work. I see the popup.html input field but the functions that make the magic won't trigger and I do not understand why.
I do not think I need an event.js page to run the above simple functions but please let me know the best approach for this. Hope I was clear enough on what I am trying to achieve.
Any help is more than welcome stackoverflowers!
Google Chrome extensions do not allow inline Javascript.
You'll need to to add an event listener in your popup.js instead.
document.querySelector('#amount').addEventListener('keyup', function() {
//get input's value and call your functions here
});
I want to get all the file names and sub folders names in JavaScript. But, in my code the activeX object method is not working. Could you find the problem in my code please?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Report Interface</title>
<script type="text/javascript">
function FindFile(FOo)
{
var fs = new ActiveXObject("Scripting.FileSystemObject");
var Folder = fs.GetFolder(FOo);
var FileCollection = Folder.Files;
var Files = new Array();
for(var objEnum = new Enumerator(FileCollection); !objEnum.atEnd(); objEnum.moveNext())
{
strFileName = objEnum.item();
alert(strFileName);
}
}
</script>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
var file_path = "C:/xampp/tomcat/webapps/brt-example/report"; // Starting directory
FindFile(file_path);
}
</script>
</body>
</html>
Only IE has support for ActiveX, it can't be accessed with default security settings due to security reasons, if you have to run this -
Go to IE Tools > Internet options > Security > Custom Level >
Under the ActiveX controls and plug-ins, select\ enable for Initializing and Script ActiveX controls not marked as safe for scripting.
I am developing a chrome extensions. What i want to realize is that the popup can display the text from pdf. I have searched the PDF.js and write the following code in backgroud.js of chrome extensions to test:
‘use strict’;
var pdf = PDFJS.getDocument('http://www.pacer.gov/documents/pacermanual.pdf');
var pdf = PDFJS.getDocument('pacermanual.pdf');
pdf.then(function(pdf) {
var maxPages = pdf.pdfInfo.numPages;
for (var j = 1; j <= maxPages; j++) {
var page = pdf.getPage(j);
// the callback function - we create one per page
var processPageText = function processPageText(pageIndex) {
return function(pageData, content) {
return function(text) {
// bidiTexts has a property identifying whether this
// text is left-to-right or right-to-left
for (var i = 0; i < text.bidiTexts.length; i++) {
str += text.bidiTexts[i].str;
}
if (pageData.pageInfo.pageIndex ===
maxPages - 1) {
// later this will insert into an index
console.log(str);
}
}
}
}(j);
var processPage = function processPage(pageData) {
var content = pageData.getTextContent();
content.then(processPageText(pageData, content));
}
page.then(processPage);
}
});
The manifest is shown as follow:
{
"name": "englishhelper",
"version": "0.0.1",
"description": "",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"background":{
"script":["background.js","PDF.js"]
},
"browser_action":{
"default_icon":"icon_png",
"default_popup":"popup.html"
},
"manifest_version": 2
}
The popup.html is shown as follow:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css">
<title></title>
</head>
<body>
<script src="background.js"></script>
<script src="PDF.js"></script>
</body>
</html>
The console shows that "PDFJS is not defined". The "PDF.js" has been included in popup.html. Is it possible that chrome extension use PDF.js?
Wrong load order. (Do we have a canonical question for that?)
background.script or content_scripts[i].js key in the manifest is an array, in other words an ordered list.
Scripts are loaded and executed in the sequence defined there; you need to make sure libraries are loaded before they are used.
In your case, you need to swap them around:
"background":{
"script": ["PDF.js", "background.js"]
},
Same applies to the order of <script> tags in HTML, for instance in your popup.html
I'm trying to create an extension for Chrome Browser. It should include options where the behaviour of an newly created tab can be chosen (e.g. opening the tab in background or in foreground). The setting should be stored with localStorage.
As I'm new in programming JavaScript, I took the example code from http://developer.chrome.com/extensions/options and tried to customise it. This is what I have so far, and it is working (which means the chosen radio button is saved when page is reloaded) in jsfiddle: http://jsfiddle.net/yczA8/
I was really happy to see it working. But after having created and loaded the Chrome extension, it wasn't working any more. Also opening the html-File in Chrome Browser doesn't show the same behaviour as it does in jsfiddle. Why not? Where's the problem?
This is my popup.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
min-width: 200px;
min-heigth: 100px;
overflow-x: hidden;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<h3>Neuer Tab im:</h3>
<form method="post">
<input type="radio" name="tabVerhalten" value="tabVordergrund" />Vordergrund
<br />
<input type="radio" name="tabVerhalten" value="tabHintergrund" />Hintergrund
</form>
<div id="status"></div>
<button id="save">Save</button>
</body>
</html>
This one is popup.js:
// Saves options to localStorage.
function save_options() {
var tabVerhalten1 = document.getElementsByName('tabVerhalten')[0].checked;
var tabVerhalten2 = document.getElementsByName('tabVerhalten')[1].checked;
var tabVerhaltenIndex;
if (tabVerhalten1)
tabVerhaltenIndex = 0;
else if (tabVerhalten2)
tabVerhaltenIndex = 1;
localStorage.setItem("tabVerhalten", tabVerhaltenIndex);
// Update status to let user know options were saved.
var status = document.getElementById("status");
status.innerHTML = "Änderungen gespeichert.";
setTimeout(function () {
status.innerHTML = "";
}, 750);
}
// Restores select box state to saved value from localStorage.
function restore_options() {
var storedVal = localStorage.getItem("tabVerhalten");
if (!storedVal) {
return;
}
document.getElementsByName('tabVerhalten')[storedVal].checked = true
}
restore_options();
document.addEventListener('DOMContentLoaded', restore_options);
document.querySelector('#save').addEventListener('click', save_options);
and finally the manifest.json:
{
"manifest_version": 2,
"name": "TEST",
"version": "1.0",
"author": "STM",
"description": "Description",
"permissions": ["contextMenus", "tabs"],
"background": {"scripts": ["script.js"]},
"icons": {"16": "16.png", "48": "48.png", "128": "128.png"},
"browser_action": {"default_icon": "48.png", "default_popup": "popup.html"}
}
Try doing this instead:
document.addEventListener("DOMContentLoaded", function() {
restore_options();
}, false);
I MADE THE FOLLOWING CHANGES:
I removed method="post"
I moved <script src="popup.js"></script> after all the other script
I changed the parameters for the addEventListener() method
HERE ARE THE CHANGED SCRIPTS
popup.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
min-width: 200px;
min-heigth: 100px;
overflow-x: hidden;
}
</style>
</head>
<body>
<h3>Neuer Tab im:</h3>
<form>
<input type="radio" name="tabVerhalten" value="tabVordergrund" />Vordergrund
<br />
<input type="radio" name="tabVerhalten" value="tabHintergrund" />Hintergrund
</form>
<div id="status"></div>
<button id="save">Save</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
// Saves options to localStorage.
function save_options() {
var tabVerhalten1 = document.getElementsByName('tabVerhalten')[0].checked;
var tabVerhalten2 = document.getElementsByName('tabVerhalten')[1].checked;
var tabVerhaltenIndex;
if (tabVerhalten1)
tabVerhaltenIndex = 0;
else if (tabVerhalten2)
tabVerhaltenIndex = 1;
localStorage.setItem("tabVerhalten", tabVerhaltenIndex);
// Update status to let user know options were saved.
var status = document.getElementById("status");
status.innerHTML = "Änderungen gespeichert.";
setTimeout(function () {
status.innerHTML = "";
}, 750);
}
// Restores select box state to saved value from localStorage.
function restore_options() {
var storedVal = localStorage.getItem("tabVerhalten");
if (!storedVal) {
return;
}
document.getElementsByName('tabVerhalten')[storedVal].checked = true
}
restore_options();
document.addEventListener('DOMContentLoaded',function() {restore_options();}, false);
button_thing = document.querySelector('#save').addEventListener('click',function() {save_options();}, false);
Your problem is, in JSFiddle you are running the JS-code onLoad and in your files you are running the JS-code in the header.
If you change it in your JSFiddle, it's no longer working as you can see here: JSFiddle.
So, what can you do to solve this issue?
There are different ways, I'll recommend to load your JS-code on load, like JSFiddle does. To do this, add the onload event to your body tag. There you call a function named 'loadMyScript();' or something like this:
<body onload="loadMyScript();">
For the next step, you have the choice: You can put your whole code in the loadMyScript() function or you import your script with the loadMyScript() function. I didn't test those ways, so I can't tell you which one is working better or which one is simpler but you should try the import-script-way first, because I think this could avoid issues.
Little example of the import-script-way:
<head>
<script>
function loadMyScript() {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "popup.js";
document.body.appendChild(js);
}
</script>
<!-- YOUR HTML HEAD HERE -->
</head>
<body onload="loadMyScript();">
<!-- YOUR HTML BODY HERE -->
</body>