I need to run a content script attached to a specific HTML page that appears when an error occurs. The webextension is an embedded extension at the moment. The files structure is as follows:
- SDK extension [directory]
- webextension [directory]
- main.js
- data [directory]
- error.html
- error-script.js
Everything runs well except that when I click on the button which should fire the content script, nothing happens. I tried several format for the content script file path in the manifest.js "js": ["webextension/data/error-script.js"] but nothing changed.
EDIT:
The path for the error.html when an error occurs contains some automatically generated prefix which does not reflect the actual path:
moz-extension://7c92a8c2-219d-4233-a973-c51032e2a375/data/error.html
Here is a simple example code:
1) manifest.json:
{
"manifest_version": 2,
"name": "example",
"version": "1.0",
"description": "No description.",
"background": {
"scripts": ["main.js","error.js"]
},
"content_scripts": [
{
"matches": ["*://*/error.html"],
"js": ["webextension/data/error-script.js"]
}
],
"permissions": [
"<all_urls>",
"activeTab",
"tabs",
"storage",
"webRequest"
],
"browser_action": {
"default_icon": {
"64": "icons/myicon.png"
},
"default_title": "example"
},
"hasEmbeddedWebExtension": true
}
2) HTML page error.html:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
Test.
<input type="button" class="error-button" id="error-button" value="error">
</body>
</html>
3) A content script error-script.js:
var button = document.getElementById("error-button");
button.addEventListener("click",showAlert);
function showAlert()
{
alert("Error");
}//end function.
4) A background script: error.js:
var target = "<all_urls>";
function logError(responseDetails) {
errorTab=responseDetails.tabId;
console.log("response tab: "+errorTab);
browser.tabs.update(errorTab,{url: "data/error.html"});
}//end function
browser.webRequest.onErrorOccurred.addListener(
logError,
{urls: [target],
types: ["main_frame"]}
);
Related
I'm trying to build a screen to save a connector and I cannot get the Save button to work. It throws a JavaScript error from deep inside Teams itself.
As you can see I'm using the latest stable version of Teams JS.
My code has been boiled down to as simple as can be made. It just inits and sets the Save button validity so it can be clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://res.cdn.office.net/teams-js/2.7.1/js/MicrosoftTeams.min.js" crossorigin="anonymous">
</script>
</head>
<body>
<p>Testing 6</p>
<script>
async function init() {
await microsoftTeams.app.initialize();
microsoftTeams.pages.config.setValidityState(true);
}
init();
</script>
</body>
</html>
If I load up the console in my web browser, this is the error I receive:
2023-01-25T03:00:00.927Z Received error from connectors {
"seq":1674609016862,
"timestamp":1674613638241,
"flightSettings":{
"Name":"ConnectorFrontEndSettings",
"AriaSDKToken":"d12...",
"SPAEnabled":true,
"ClassificationFilterEnabled":true,
"ClientRoutingEnabled":true,
"EnableYammerGroupOption":true,
"EnableFadeMessage":false,
"EnableDomainBasedOwaConnectorList":false,
"EnableDomainBasedTeamsConnectorList":false,
"DevPortalSPAEnabled":true,
"ShowHomeNavigationButtonOnConfigurationPage":false,
"DisableConnectToO365InlineDeleteFeedbackPage":true,
"RemoveAnchorHeader":true
},
"status":500,
"clientType":"SkypeSpaces",
"connectorType":"92a...",
"name":"handleMessageError"
}
The manifest file is also simple: it is the one downloaded from the Connector Dashboard (with the invalid part deleted and the schema version upgraded because the dashboard generates INVALID MANIFESTS). Because I've downloaded the file, the UUIDs and valid domains are perfect matches.
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.15/MicrosoftTeams.schema.json",
"manifestVersion": "1.15",
"id": "2ac21268...",
"version": "1.0.0",
"packageName": "com.Simple I/O (Development 3)",
"developer": {
"name": "Developer",
"websiteUrl": "https://3821-68-69-235-13.ngrok.io",
"privacyUrl": "https://3821-68-69-235-13.ngrok.io",
"termsOfUseUrl": "https://3821-68-69-235-13.ngrok.io"
},
"description": {
"full": "Simple I/O (Development 3)",
"short": "Simple I/O (Development 3)"
},
"icons": {
"outline": "outline.png",
"color": "color.png"
},
"connectors": [
{
"connectorId": "2ac21268...",
"scopes": [
"team"
],
"configurationUrl": "https://3821-68-69-235-13.ngrok.io/teams/connector"
}
],
"name": {
"full": "Simple I/O (Development 3)",
"short": "Simple I/O (Development 3)"
},
"accentColor": "#FFFFFF",
"validDomains": [
"3821-68-69-235-13.ngrok.io"
]
}
Despite everything mentioned in the documentation, the following is required otherwise you'll get this error. This fixed things for me.
microsoftTeams.settings.registerOnSaveHandler(saveEvent => {
microsoftTeams.settings.setSettings({
contentUrl: "https://xxxxxx.ngrok.io/teams/connector"
});
saveEvent.notifySuccess();
});
The documentation states that registering a save handler is optional and Teams will handle notify success if it's not declared. WRONG. You must register a save handler.
The documentation does not state that setSettings is required. WRONG. You must set settings or else you will receive this error.
The documentation does not state that you must save a contentURL. WRONG. You must set content URL in the setSettings. You can apparently omit other things when setting your settings, but not content URL.
The documentation does not specifically mention it, but the contentURL must comply with your validURLs in your manifest. If it does not, you'll also see this error.
I have the following background.js script:
browser.runtime.onInstalled.addListener(function () {
browser.contextMenus.create({
id: 'add-todo',
title: 'Add a todo',
contexts: ['page']
});
});
browser.contextMenus.onClicked.addListener(function (clickData) {
if (clickData.menuItemId === 'add-todo') {
var todoName = window.prompt('Add a todo')
alert(todoName);
}
});
And the following manifest.json
{
"manifest_version": 2,
"name": "Todo",
"version": "1.0",
"description": "Yet another todo app",
"browser_action": { "default_popup": "index.html" },
"permissions": ["contextMenus"],
"background": {
"scripts": [
"background.js"
]
}
}
I can see the context menu when I right click, but clicking it does nothing.
Oddly, when I open the extension via the browser action button, and it displays my popup.html, I can right click there and see a prompt dialog.
I use the same code in Chrome with the webextension-polyfill library and it works just fine.
What gives with Firefox?
I'm loading a popup via the "browser_action" option in manifest.json. The HTML file loads, and the FIRST script tag I declare loads, but the other two js files after it doesn't. The javascript is loaded at the bottom of the file, like so:
<script type="application/x-javascript" src="const.js"/>
<script type="application/x-javascript" src="core.js"/>
<script type="application/x-javascript" src="options.js"/>
and the manifest looks like this:
{
"manifest_version": 2,
"name": "myExtension",
"version": "1.1",
"description": "myExtension",
"icons": {
"32": "chrome/skin/myExtension.png"
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "chrome/icons/default/myExtension.ico",
"default_title": "myExtension",
"default_popup": "chrome/content/options.html"
}
}
I have a firefox webextension ported from chrome extension. The executeScript call fails on this site.
https://addons.mozilla.org/en-US/firefox/
I tested with multiple pages on this site and all are giving the same error
The bare-minimum code to reproduce this is
popup.js
document.addEventListener("DOMContentLoaded", function () {
chrome.tabs.query({"active": true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {"code": "console.log('Script executed in ' + document.location.href);"}, function(r) {
if(chrome.runtime.lastError) {
console.log(chrome.runtime.lastError);
document.body.innerHTML = 'Execute script Fail. check console';
} else {
document.body.innerHTML = 'Execute script Success';
}
});
});
});
manifest.json
{
"manifest_version": 2,
"name": "execscript_test",
"short_name": "execscript_test",
"version": "0.0.1",
"description": "desc",
"icons": {
"19": "images/icon19.png",
"38": "images/icon38.png",
"128": "images/icon.png"
},
"applications": {
"gecko": {
"id": "execscript_test#me.com",
"strict_min_version": "48.0"
}
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"<all_urls>"
],
"browser_action": {
"browser_style": false,
"default_icon": "images/icon.png",
"default_title": "execscript_test",
"default_popup": "popup.html"
}
}
background.js - file is present but it is empty
popup.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
On https://addons.mozilla.org/en-US/firefox/addon/engrip-tracker/?src=search page I clicked on the browser button and got this error in browser console
Error: No window matching {"matchesHost":["<all_urls>"]}
Stack trace:
Async*#moz-extension://062a83b0-81f1-42f0-84a8-89ecdc2c08e0/popup.js:8:4
Async*#moz-extension://062a83b0-81f1-42f0-84a8-89ecdc2c08e0/popup.js:2:2
EventListener.handleEvent*#moz-extension://062a83b0-81f1-42f0-84a8-89ecdc2c08e0/popup.js:1:1
I thought it could be some url scheme issue but this happens even on https://addons.mozilla.org/en-US/firefox/
The same code works without error on chrome.
I am on FF v50. I tested this on FF nightly also (v53.0a1) and the error persists.
Is this something specific to this site? Or am I missing something here?
This is deliberate, it is covered in e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=1310082
I'm trying to author a Typescript file with unit tests for a Typescript source file. My project structure:
/js/my-unit.ts
/js-tests/my-unit.tests.ts
/Scripts/typings/qunit/qunit.d.ts
/chutzpah.json
Here's the my-unit.ts contents:
function globalFunc() { return { dummy: "object" }; }
Here's the my-unit.tests.ts contents:
/// <reference path="../scripts/typings/qunit/qunit.d.ts" />
/// <reference path="../js/my-unit.ts" />
QUnit.test("Test 1", assert => assert.ok(!!globalFunc()));
Here's the chutzpah.json file:
{
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ]
},
"Tests": [
{ "Includes": [ "**/*-tests/**.ts" ] }
]
}
The test is red, because:
Can't find variable: globalFunc
Why!? How do I fix that?
What have I tried:
referencing the .js file in my tests file, but that isn't allowed
searching for dupes, finding mainly this question, but one answer didn't work, and the other (by Chutzpah's author, no less) seems to be similar to my own setup
re-reading the "Running Unit Tests with Typescript" documenation
changing the reference to the source to a path (with and without slash ending), but that gives me errors in Visual Studio
adding class Foo {} in the unit file and assert.ok(!!new Foo()) test, but this also fails
adding module My { export class Foo { } } in the unit file and assert.ok(!!new My.Foo()) test, but this also fails
using the "Open in browser" feature from the other Chutzpah extension, and check the source for the test file (which presumably is also generated for tests when run from the test explorer), where I see that indeed my source file (my-unit.ts or my-unit.js) is not referenced:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit Tests</title>
<link rel="stylesheet" type="text/css" href="file:///E:/path/to/TestFiles/QUnit/qunit.css"/>
<script type="text/javascript" src="file:///E:/path/to/TestFiles/QUnit/qunit.js"></script>
<script type="text/javascript" src="file:///E:/path/to/project/js-tests/my-unit.tests.js"></script>
<script>
var amdTestPaths = [];
// code ommitted for brevity...
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
Adding
"References": [{ "Path": "js", "Includes": [ "**.ts" ], "Excludes": [ "**.d.ts" ] }
to my chutzpah.json file. This kind-of works, but is a rather brute-force hack, because now all my source files will be included for each test fixture...
The above is a (hopefully) minimal repro of my actual scenario. How can I get it to work?
TL;DR Version
After some more searching I found that setting ExpandReferenceComments to true fixes things:
"Tests": [
{
"ExpandReferenceComments": true,
"Includes": [ "**/js-tests/**.ts" ]
}
]
It is explained here and will make sure the /// comments are expanded into <script> tags in the test files Chutzpah generates.
Full solution
Here's all files of a minimal repro that works:
/chutzpah.json
{
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ]
},
"Tests": [
{
"ExpandReferenceComments": true,
"Includes": [ "**/js-tests/**.ts" ]
}
]
}
/js/my-unit1.ts
function globalFunc1() { return { dummy: "object 1" }; }
/js/my-unit2.ts
function globalFunc2() { return { dummy: "object 2" }; }
/js-tests/my-unit1.tests.ts
/// <reference path="../scripts/typings/qunit/qunit.d.ts" />
/// <reference path="../js/my-unit1.ts" />
QUnit.test("globalFunc1 works", assert => assert.ok(!!globalFunc1()));
/js-tests/my-unit2.tests.ts
/// <reference path="../scripts/typings/qunit/qunit.d.ts" />
/// <reference path="../js/my-unit2.ts" />
QUnit.test("globalFunc2 works", assert => assert.ok(!!globalFunc2()));
Footnotes
I'm unsure why the default for ExpandReferenceComments is false, or when that would even be useful (perhaps when the Comple Mode is not External?).
The "Full solution" above includes two units and two test files, because I wanted to verify that the references are expanded per test file, which it does (if you run them in the browser you'll see that Chutpah only generates <script> tags for that fixture).