Can I somehow use aJax in my Google Chrome Extension "default_popup".
I have tried the following...
manifest.json:
{
"name": "My extension",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"tabs", "http://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery-1.8.3.min.js", "content.js"],
"run_at": "document_end"
}
]
}
popup.html:
<html>
<body>
<script>
$.ajax({
type: "GET",
url: "http://www.mysite.com/api.php"
}).done(function(response) {
alert("work");
}).fail(function(response) {
alert("doesn't work");
});
</script>
</body>
</html>
Does anyone have any ideas how to do this?
It's possible, but you'll most likely have to use JSONP. You can use what you already have as a basis, so it shouldn't require much refactoring.
Related
I have started developing an addon which would work on package.json of a Github repo. On loading the addon, it requires an additional page refresh for the addon to take effect instead of applying the border as soon as the url is recognized.
manifest.json
{
"manifest_version": 2,
"name": "Border It",
"version": "0.0.1",
"permissions": ["activeTab", "tabs", "https://github.com/*"],
"content_scripts": [
{
"matches": ["https://github.com/*/package.json"],
"js": ["src/scripts/borderify.js"],
}
]
}
borderify.js
document.body.style.border = '5px solid red';
What am I doing wrong?
GitHub updates page content dynamically, so you need to run your script on every GitHub pages ("matches": ["https://github.com/*"]) and observe the location change. Here is more hints:
Event when window.location.href changes
(updated)
Example implementation based on MutationObserver:
{
"manifest_version": 2,
"name": "Border It",
"version": "0.0.1",
"permissions": [
"activeTab",
"tabs",
"https://github.com/*"
],
"content_scripts": [
{
"matches": ["https://github.com/*"],
"js": ["borderify.js"]
}
]
}
function onLocationChanged() {
if (/\/package.json([?#]|$)/.test(location.pathname))
document.body.style.border = '5px solid red';
else
document.body.style.border = '';
}
onLocationChanged(); // executed when the page is initially loaded
let lastUrl;
const observer = new MutationObserver(mutations => {
// executed on any dynamic change in the page
if (location.href == lastUrl)
return;
lastUrl = location.href;
onLocationChanged();
});
const config = {
childList: true,
subtree: true
};
observer.observe(document.body, config);
I am following the tutorials on https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-configuration with the configuration code provided. When I hit save after some seconds I get the error that it was not successful.
As far as I am concerned all needed valid domains are added.
Manifest.json
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.3/MicrosoftTeams.schema.json",
"manifestVersion": "1.3",
"id": "ec3e802c-506d-4301-9ae4-868b93461ca0",
"version": "1.0.0",
"packageName": "com.Package",
"developer": {
"name": "Developer",
"websiteUrl": "https://privateDomain.de",
"privacyUrl": "https://privateDomain.de",
"termsOfUseUrl": "https://privateDomain.de"
},
"description": {
"full": "Text",
"short": "More Text"
},
"icons": {
"outline": "IncomingWebhook.jpg",
"color": "IncomingWebhook.jpg"
},
"connectors": [
{
"connectorId": "ec3e802c-506d-4301-9ae4-868b93461ca0",
"scopes": [
"team"
],
"configurationUrl": "*linkToConfigurationPage*"
}
],
"name": {
"full": "Package",
"short": "Package"
},
"accentColor": "#FFFFFF",
"validDomains": [
"bing.com",
"google.com",
"*.google.com",
"*.bing.com",
"teams-get-started-sample.azurewebsites.net",
"*.microsoft.com",
"*.skype.com",
"*.privateDomain.de",
"vater-gruppe.de",
"static2.sharepointonline.com",
"secure.aadcdn.microsoftonline-p.com",
"code.jquery.com",
"statics.teams.microsoft.com",
"*.microsoftonline.com",
"ajax.googleapis.com"
],
"needsIdentity": "false"
}
The code in the index on the SSL capable server(linkToConfigurationPage) is
`<body>
<form>
<input type="radio" name="maptype" value="bing" onclick="onClick()"> Bing Maps<br>
<input type="radio" name="maptype" value="google" onclick="onClick()"> Google Maps
</form>
<script src="https://statics.teams.microsoft.com/sdk/v1.2/js/MicrosoftTeams.min.js"></script>
<script type="text/javascript">
microsoftTeams.initialize();
microsoftTeams.settings.registerOnSaveHandler(function(saveEvent){
var radios = document.getElementsByName("maptype");
if (radios[0].checked) {
microsoftTeams.settings.setSettings({
entityId: "bing",
contentUrl: "https://www.bing.com/maps/embed",
suggestedDisplayName: "Bing Map",
websiteUrl: "https://www.bing.com/maps",
removeUrl: "https://teams-get-started-sample.azurewebsites.net/tabremove.html",
});
} else {
microsoftTeams.settings.setSettings({
entityId: "google",
contentUrl: "https://www.google.com/maps/embed",
suggestedDisplayName: "Google Map",
websiteUrl: "https://www.google.com/maps",
removeUrl: "https://teams-get-started-sample.azurewebsites.net/tabremove.html",
});
}
saveEvent.notifySuccess();
});
function onClick() {
microsoftTeams.settings.setValidityState(true);
}
</script>
</body>
</html>`
The error message I get is
angular.min.js:112 2018-09-04T09:26:24.007Z Received error from connectors {"seq":1536048346894,"timestamp":1536053183994,"flightSettings":{"Name":"ConnectorFrontEndSettings","AriaSDKToken":"d127f72a3abd41c9b9dd94faca947689-d58285e6-3a68-4cab-a458-37b9d9761d35-7033","SPAEnabled":true,"ClassificationFilterEnabled":true,"ClientRoutingEnabled":true,"EnableYammerGroupOption":true,"EnableFadeMessage":false,"EnableDomainBasedOwaConnectorList":false,"EnableDomainBasedTeamsConnectorList":false,"DevPortalSPAEnabled":true,"ShowHomeNavigationButtonOnConfigurationPage":false},"status":500,"clientType":"SkypeSpaces","connectorType":"ec3e802c-506d-4301-9ae4-868b93461ca0","name":"handleMessageError","nonPIIInfo":"{\"exception\":{}}"}
Can anyone help me what I am doing wrong?
The content URL in microsoftTeams.settings.setSettings() is used to handle edits. This URL also need to be under the same domain which is added in Connector Portal's valid domain section. You could try following as your linkToConfigurationPage is already part of valid domains.
microsoftTeams.settings.setSettings({
entityId: "bing",
contentUrl: "*linkToConfigurationPage*",
suggestedDisplayName: "Bing Map"
})
The solution is to remove the "validDomains" attribute from the generated mainfest.json.
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 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"]}
);
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