Problem Setup
This example html:
<html>
<head>
<script>
let blob = new Blob(["<html>Blob content!</html>"], {type: 'text/html'});
let blobUrl= URL.createObjectURL(blob);
window.location.href = blobUrl;
</script>
</head>
<body>
Initial Page
</body>
</html>
Produces a new html page with the content: <html>Blob content!</html>.
The page URL is: blob:null/c608e557-cacb-4bec-bce2-1f68c6315415
I have a chrome extension with the manifest.json looking something like this:
"content_scripts": [{
"matches": ["<all_urls>"],
"match_origin_as_fallback": true,
"run_at": "document_idle",
"js": ["getPage.js"],
"all_frames": true
}]
Question
Why does the content_script getPage.js not get injected into the blob URL?
Related
Does anyone know how to inject a remote CSS file onto current tab without downloading it and adding to my extension package?
Here's the code I'm running:
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
var activeTab = tabs[0];
chrome.scripting.insertCSS
({
target: { tabId: activeTab.id },
files: ['https://fonts.googleapis.com/css2?family=Acme']
});
chrome.scripting.insertCSS
({
target: { tabId: activeTab.id },
css: 'body{font-family:Acme !important;}'
});
});
I get the following error:
Uncaught (in promise) Error: Could not load file: 'https://fonts.googleapis.com/css2?family=Acme'.
Here's sections of the manifest I've added without luck:
"host_permissions":
[
"https://fonts.googleapis.com",
"https://fonts.gstatic.com"
],
"web_accessible_resources":
[
{
"resources": [ "css2?family=Acme" ],
"matches": [ "https://fonts.googleapis.com/*" ]
},
{
"resources": [ "MwQ5bhbm2POE2V9BPQ.woff2" ],
"matches": [ "https://fonts.gstatic.com/*" ]
}
]
Here's one workaround for my problem that actually gives me the result I'm looking for by storing the content of the remote CSS file into a string first. It's a bit hacky and relies on jQuery. Would still like to find a better way.
$.ajax
({
type:'GET',
url:'https://fonts.googleapis.com/css2?family=Acme',
success: function(fontCss)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
var activeTab = tabs[0];
var customCss = 'body{font-family:Acme !important;}';
var fullCss = fontCss + customCss;
chrome.scripting.insertCSS
({
target: { tabId: activeTab.id },
css: fullCss
});
});
}
});
I want to convert below html code to requireJS. In this code, I am trying to use JQuery Querybuilder component, however I am getting issues because some of js files are older than requireJS
<!DOCTYPE html>
<html>
<head>
<title>jQuery QueryBuilder</title>
<script src="scripts/dot/doT.js"></script>
<script src="js/libs/jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script src="scripts/jquery-extendext.js" type="text/javascript"></script>
<script src="scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/query-builder.js" type="text/javascript"></script>
</head>
<body>
<div id="builder"></div>
<script>
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
</script>
</body>
</html>
I was able to figure this out, issue was mainly with 'dot/doT' call in query-builder.js file
Below is the code that works for me:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/require/require.js" type="text/javascript"></script>
<script src="require_config.js" type="text/javascript"></script>
</head>
<body>
<div id="elmId">TODO write content</div>
<div id="builder">TODO write content</div>
</body>
<script>
require(['dot/doT','jquery','jquery-extendext','bootstrap','query-builder'], function (dot,$) {
console.log("loaded jquery!!!",$("#elmId"));
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
});
</script>
</html>
require_config.js file contains below code:
requirejs.config({
paths: {
jquery: 'js/libs/jquery/jquery-3.4.1.min',
dot:'scripts/dot',
'jquery-extendext': 'scripts/jquery-extendext',
bootstrap:'scripts/bootstrap.min',
'query-builder': 'scripts/query-builder.min'
},
shim: {
jquery: {
exports: ['jQuery', '$']
},
//https://requirejs.org/docs/api.html#config
bootstrap : { "deps" :['jquery'] }
}
});
Hope this helps someone in future.
I have a node azure function with the function.json like this:
{
"disabled": false,
"bindings": [
{
"name": "req",
"type": "httpTrigger",
"direction": "in",
"methods": [ "get" ]
},
{
"name": "res",
"type": "http",
"direction": "out"
}
]
}
I want the function to return html to give me a page like this:
However, when I write the index.js like this:
module.exports = function (context, sentimentTable) {
context.res = {
body: "<!DOCTYPE html> <html> <head> </head> <body> Hello World </body> </html>",
contentType: "text/html"
};
context.done();
};
I am getting this:
Can Azure Functions return html?
Must be 'Content-Type' and you specify headers this way
context.res = {
body: '...',
headers: {
'Content-Type': 'text/html; charset=utf-8'
}
}
See this blog post on AzureServerless.com - http://azureserverless.com/2016/11/12/a-html-nanoserver/
Alternatively, you can use the fluent express style:
module.exports = function (context, req) {
context.res
.type("text/html")
.set("someHeader", "someValue")
.send("<!DOCTYPE html> <html> <head> </head> <body> Hello World </body> </html>");
};
Make sure that the http output binding is set to res and not $return.
I am trying to use React Hot Loader in React. I installed react hot loader by running "npm install --save-dev react-hot-loader". I tried to follow the http://gaearon.github.io/react-hot-loader/getstarted/ but couldn't understand. I am attaching my webpack.config.js and package.json. I made changes as listed in document. But I am not able to see the changes I make in components on the fly. What is wrong?
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devServer: {
inline: true,
contentBase: './src',
port: 3000
},
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./dev/js/index.js' // Your appʼs entry point
],
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot','babel'],
exclude: /node_modules/
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: 'src',
filename: 'js/bundle.min.js'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
scripts from package.json
"scripts": {
"dev": "webpack",
"start": "webpack-dev-server"
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Webpack</title>
</head>
<body>
<div id="root"></div>
<script src="js/bundle.min.js"></script>
</body>
</html>
Ok, now you need to add the hot loading script to your html file, right before bundle like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Webpack</title>
</head>
<body>
<div id="root"></div>
<script src="http://localhost:3000/webpack-dev-server.js"></script>
<script src="js/bundle.min.js"></script>
</body>
</html>
It's under localhost:3000 because I see that in your webpack config. I usually just leave it under :8080, but I think it needs to be like this based on your config.
I am trying to create a grid with the help of Telerik Kendo UI which will show SharePoint data. To fetch data I am using SharePoint oData service.
I got an example of similer functionality here http://demos.telerik.com/kendo-ui/grid/remote-data-binding
And tried below code
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://server/_api/Web/Lists(guid'guid of list')/Items"
},
schema: {
model: {
fields: {
Title: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"Title"
}
]
});
});
</script>
</div>
</body>
</html>
And got below error
Refused to execute script from
'http://server/_api/Web/Lists(guid'listguid50387715207_1459178447636&%24inlinecount=allpages&%24format=json&%24top=20'
because its MIME type ('application/atom+xml') is not executable, and
strict MIME type checking is enabled.
You might want to change the transport-property to
transport: {
read: {
url: "http://server/_api/Web/Lists(guid'guid of list')/Items",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json; odata=verbose")
}
}
}
in order to force sharepoint to return json-data instead of atom+xml (which is the default if you ommit the accept-header).