Im trying to cancel every url requests that google chrome does with my extension, but I cant achieve it. Here's the code:
// Headers.js
var tabId = parseInt(window.location.search.substring(1));
function cancel(requestDetails) {
console.log("Canceling: " + requestDetails.url);
return {cancel: true};
}
chrome.webRequest.onBeforeRequest.addListener(
cancel,
{urls: ["<all_urls>"]},
["blocking"]
);
window.addEventListener("load", function() {
chrome.debugger.sendCommand({tabId:tabId}, "Network.enable");
chrome.debugger.onEvent.addListener(onEvent);
});
window.addEventListener("unload", function() {
chrome.debugger.detach({tabId:tabId});
});
var requests = {};
function onEvent(debuggeeId, message, params) {
if (tabId != debuggeeId.tabId)
return;
if (message == "Network.requestWillBeSent") {
var requestDiv = requests[params.requestId];
if (!requestDiv) {
var requestDiv = document.createElement("div");
requests[params.requestId] = requestDiv;
requestDiv.textContent = params.request.url;
}
if (params.redirectResponse)
appendResponse(params.requestId, params.redirectResponse);
document.getElementById("container").appendChild(requestDiv);
} else if (message == "Network.responseReceived") {
appendResponse(params.requestId, params.response);
}
}
Here's the manifest.json:
{
"name": "Live HTTP headers",
"description": "Displays the live log with the http requests headers",
"version": "0.7",
"permissions": [
"debugger",
"webRequest",
"webRequestBlocking"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Live HTTP headers"
},
"manifest_version": 2
}
Here's the background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.debugger.attach({tabId:tab.id}, version,
onAttach.bind(null, tab.id));
});
var version = "1.0";
function onAttach(tabId) {
if (chrome.runtime.lastError) {
alert(chrome.runtime.lastError.message);
return;
}
chrome.windows.create({url: "headers.html?" + tabId, type: "popup", width: 800, height: 600});
}
And here is the headers.html:
<html>
<head>
<style>
body {
font-family: monospace;
word-wrap: break-word;
}
#container {
white-space: pre;
}
.request {
border-top: 1px solid black;
margin-bottom: 10px;
/*background-color:red;*/
}
</style>
<script src="headers.js">
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I already look in stackoverflow about this topic, but I couldnt solve this problem. Can someone give me a hand? Thanks
Related
Good day everyone, right now i'm trying to create a textbox like this (stackoverflow textbox) using angularJS .. but im having difficulties on doing so , i have to replace **SOME TEXT HERE** to strong SOME TEXT HERE /strong here's my code ..
$(document).ready(function() {
var app = angular.module("appModule", [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
/* ALLOW ANGULAR TO RENDER HTML OUTPUT */
app.directive('compile', ['$compile', function($compile) {
return function(scope, element, attrs) {
scope.$watch(function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
)
};
}]);
/* CONTROLLER FOR PROFILE TICKER */
app.controller("ProfileTickerController", function($rootScope, $scope, dataService, FileUploader) {
// INITIAL VALUES FOR PROFILE TICKER
$scope.ticker = '';
$scope.previous = '';
$scope.edit = false;
$scope.editTicker = function() {
$scope.previous = $scope.ticker;
if ($scope.ticker == "<span class='color-light-grey'>Ticker not set</span>") {
$scope.ticker = "";
}
$scope.edit = true;
}
$scope.cancelEdit = function() {
$scope.ticker = $scope.previous;
$scope.edit = false;
}
$scope.saveTicker = function() {
if ($scope.ticker == "") {
$scope.ticker = "<span class='color-light-grey'>Ticker not set</span>";
}
$scope.edit = false;
}
$scope.$watch('ticker', function() {
if ($scope.ticker == undefined) {
$scope.ticker = "";
}
})
$scope.init = function(id) {
var postData = 'profileID=' + id;
// SETUP AJAX CONFIG
var config = {
"method": "POST",
"url": "ajax/getTicker.php",
"data": postData,
"headers": {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded'
}
};
// AJAX TO GET PROFILE TICKER
dataService.ajaxThis(config).then(function mySuccess(response) {
// CHECK IF AJAX SUCCESSFUL
if (response.status != 200) {
console.log('Ajax error! Profile ticker not fetched. Please reload the page and try again.');
} else {
// GET PROFILE TICKER
if (response.data == "") {
$scope.ticker = "<span class='color-light-grey'>Ticker not set</span>";
} else {
$scope.ticker = response.data;
}
}
});
}
$scope.$on('profileLoaded', function(e, id) {
$scope.init(id);
});
});
})
.textarea-non-resize {
resize: none;
}
.grey-box {
background: #efefef;
border: 1px solid #dedede;
padding: 10px;
}
#ticker {
height: 42px;
background-color: #fff;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script src="script.js"></script>
<body ng-app="appModule" class="ng-scope">
<div class="row">
<div class="col-xs-12 col-sm-12" ng-controller="ProfileTickerController">
<div class="form-group">
<label for="subject">
Ticker
<span ng-show="!edit">
<i class="glyphicon glyphicon-pencil"></i>
</span>
<span ng-show="edit">
<i class="glyphicon glyphicon-ok"></i>
<i class="glyphicon glyphicon-remove"></i>
</span>
</label>
<textarea name="ticker_edit" id="ticker_edit" class="form-control textarea-non-resize" ng-model="ticker" ng-show="edit" placeholder="Customize your ticker here" required cols="50" rows="4" style="margin-bottom: 10px;"></textarea>
<div class="grey-box">
Preview:
<div id="ticker" class="text-center">
<h3 compile="ticker"></h3>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
There's a script error here, but it's working fine in my computer. So anyway how would i replace the said string above using that compiler ?
How about using a Regex to replace the value before you inject it into the element's HTML?
// replace bold text
value = value.replace(/\*\*(.*)\*\*/g, "<strong>$1</strong>");
The above is a simple example and you might need to tweak it a bit to fit your purpose, but the general idea is there.
I'm placing description on a text area by retrieving database using jsp, like follows;
<textarea readonly=""><%= item.getContent() %></textarea>
so I want to show the whole content of textarea in page without scroll bar, how can I do it?
You can refer to following link
http://jsfiddle.net/TDAcr/
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow-y: auto;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init (maxH) {
var text = document.getElementById('text');
var maxHeight=maxH;
var oldHeight= text.scrollHeight;
var newHeight;
function resize () {
text.style.height = 'auto';
newHeight= text.scrollHeight;
if(newHeight>oldHeight && newHeight>maxHeight )
{
text.style.height=oldHeight+'px';
}
else{
text.style.height = newHeight+'px';
oldHeight= text.scrollHeight;
}
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init(200);">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>
I have a xml file, and an html file associated with it.
the html file takes the xml elements and outputs a tree with hyperlinks and pictures for each node type included. how can I convert the code to work for JSON instead of XML. this is the code and the xml
I added a function to attr elements so it opens a table when I click on it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "converted14.json",
dataType: 'json',
success: function(tree) {
traverse($('#treeView'), tree)
$('#treeView li:has(li)').addClass("Max").click(function(e) {
$(this).toggleClass("Max Min");
$(this).children("ul").toggle();
e.stopPropagation();
})
$("[href]").addClass("Blue").click(function(e){
$(this).toggleClass("Purple");
e.stopPropagation();
window.location.href = $(this).attr("href")
})
$('#treeView li').click(function(g) {
var mytree2 = $(this);
mytree2.children('li').toggle();
g.stopPropagation();
})
}
})
});
function traverse(node, o) {
for (var i in o) {
if(i == "__text" || i == "_href" || i == "_attr")
continue;
if (o[i] !== null && typeof(o[i])=="object") {
if(o[i].__text){
var ul = $("<ul>").appendTo(node)
var node=$('<li>').appendTo(ul)
if(o[i]._href){
var n = $("<span>").appendTo(node)
$(n).text(o[i].__text).attr("href", o[i]._href)
}
else{
$(node).text(o[i].__text)
}
if(o[i]._attr){
var n = $("<span>").appendTo(node)
$(n).text(o[i]._attr)
$(n).hide()
$(n).parent().click(function(g){
$(n).toggle().addClass("Table")
})
}
}
traverse(node,o[i]);
}
else{
var ul = $("<ul>").appendTo(node)
if(o[i].__text){
var li = $('<li>' + o[i].__text + '<\/li>').appendTo(ul)
if(o[i]._href){
var n = $("<span>").appendTo(node)
$(n).text(o[i].__text).attr("href", o[i]._href)
}
}else{
$('<li>' + o[i] + '</li>').appendTo(ul)
}
}
}
}
</script>
<style type="text/css">
#treeView li {
list-style: none;
}
#treeView ul {
padding-left: 1em;
}
#treeView b {
padding-right: 1em;
}
.Min {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
padding-left: 15px;
}
.Blue {
text-decoration: underline;
color: Blue;
}
.Purple {
text-decoration: underline;
color: Purple;
}
.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
padding-left: 15px;
}
li {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
padding-left: 15px;
}
.Table {
background-color : yellow;
border: 1px solid black;
border-collapse: collapse;
width: 300px;
height: 100px;
padding: 50px;
box-sizing: border-box;
position: absolute;
right: 100px;
top: 50px;
}
.MainStation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.Substation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.ControlExpandable.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.PushButtonExpandable.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.Control {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.PushButton {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.ElectricStation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
</style>
<title>treeView</title>
</head>
<body>
<div id="treeView">
</div>
</body>
</html>
and heres the json file again. only 1 line added to test the attr:
{
"MAIN": {
"MainStation": [
{
"Substation": [
{
"Control": "Control1\n",
"ControlExpandable": {
"MiniControl": [
"MiniControl1",
"MiniControl2"
],
"__text": "Control2"
},
"PushButton": {
"__text": "PushButton1",
"_attr": "success\nDate:17july"
},
"_href": "http://google.com",
"__text": " Substation1\n\n\n\n\n\n\n"
},
{
"ControlExpandable": {
"MiniControl": [
"MiniControl1",
"MiniControl2"
],
"__text": "Control1"
},
"Control": "Control2",
"PushButton": "PushButton1",
"__text": " Substation2\n\n\n\n\n\n\n"
},
{
"Control": [
"Control1",
"Control2",
"Control3",
"Control4"
],
"__text": " Substation3\n\n\n\n\n\n\n\n\n"
},
{
"PushButton": [
"PushButton1",
"PushButton2"
],
"__text": " Substation4\n\n\n\n\n"
}
],
"__text": " Mainstation1\n\n\n\n\n\n\n\n\n"
},
{
"Substation": [
{
"Control": [
"Control1",
"Control2"
],
"PushButton": "PushButton1",
"__text": " Substation1\n\n\n\n\n\n\n"
},
{
"ControlExpandable": {
"MiniControl": [
"MiniControl1",
"MiniControl2"
],
"__text": "Control1"
},
"Control": "Control2",
"PushButtonExpandable": {
"MiniPushButton": [
"MiniPushButton1",
"MiniPushButton2"
],
"__text": "PushButton1"
},
"__text": " Substation2\n\n\n\n\n\n\n"
}
],
"__text": " Mainstation2\n\n\n\n\n"
}
],
"ElectricStation": {
"Substation": [
{
"Control": [
"Control1",
"Control2"
],
"PushButton": "PushButton1",
"__text": " Substation1\n\n\n\n\n\n\n"
},
{
"ControlExpandable": {
"MiniControl": [
"MiniControl1",
"MiniControl2"
],
"__text": "Control1"
},
"Control": "Control2",
"PushButtonExpandable": {
"MiniPushButton": [
"MiniPushButton1",
"MiniPushButton2"
],
"__text": "PushButton1"
},
"__text": " Substation2\n\n\n\n\n\n\n"
}
],
"__text": " ElectricStation1\n\n\n\n\n"
},
"__text": " MAIN\n\n\n\n\n\n\n"
}
}
I have tried writing the parser, Hope it helps.
The Json, is the same file that you have posted
The complete Javascript code,
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "test.json",
dataType: 'json',
success: function(tree) {
traverse($('#treeView'), tree)
$('#treeView li:has(li)').addClass("Max").click(function(e) {
$(this).toggleClass("Max Min");
$(this).children("ul").toggle();
e.stopPropagation();
})
$("[href]").addClass("Blue").click(function(e){
$(this).toggleClass("Purple");
e.stopPropagation();
window.location.href = $(this).attr("href")
})
$('#treeView li').click(function(g) {
var mytree2 = $(this);
mytree2.children('li').toggle();
g.stopPropagation();
})
}
})
});
function traverse(node, o) {
for (var i in o) {
if(i == "__text" || i == "_href")
continue;
if (o[i] !== null && typeof(o[i])=="object") {
if(o[i].__text){
var ul = $("<ul>").appendTo(node)
var node=$('<li>').appendTo(ul)
if(o[i]._href){
var n = $("<span>").appendTo(node)
$(n).text(o[i].__text).attr("href", o[i]._href)
}else{
$(node).text(o[i].__text)
}
}
traverse(node,o[i]);
}
else{
var ul = $("<ul>").appendTo(node)
if(o[i].__text){
var li = $('<li>' + o[i].__text + '<\/li>').appendTo(ul)
if(o[i]._href){
var n = $("<span>").appendTo(node)
$(n).text(o[i].__text).attr("href", o[i]._href)
}
}else{
$('<li>' + o[i] + '</li>').appendTo(ul)
}
}
}
}
</script>
Also i have changed the treeView unordered list to div.
<body>
<div id="treeView">
</div>
</body>
[EDIT]
function traverse(data) {
if (typeof(data) == 'object') {
var ul = $('<ul>');
for (var i in data) {
if(i == "__text" || i == "_href" || i == "_attr")
continue;
if(data[i].__text){
ul.append($('<li>').text(data[i].__text).append(traverse(data[i])));
}
else{
ul.append(traverse(data[i]));
}
}
return ul;
} else {
var textNode = $('<li>').text(data);
return textNode;
}
}
also change
traverse($('#treeView'), tree)
to
$('#treeView').append(traverse(tree))
in the ajax success function. I haven't handled for the attr and http. you can add it in the same way as the previous function.
I'm new in Chrome Web App programming. I want a simple WebApp which is separated to my Chrome/Chromium (means no tab). It shall show a external website in the body.
So here is my configuration:
manifest.json
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"permissions": [ "webview" ],
"icons": {
"128": "icon_128.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
}
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
bounds: {
'width': 400,
'height': 600
}
});
});
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<webview style="width: 100%; height: 100%;" src="http://www.google.de"></webview>
</body>
</html>
I excpected a window like this (it shows Chromium for demonstraiton):
But I got these:
So the height in webview isn't correct. When I set the height to (for example) 192px, it's show the correct size. But 100% isn't working...
I've asked François Beaufort (Chromium engineer atm) on Google+.
Hey replayed:
The chromium team uses window.onresize to recalculate webview width
and height in this sample:
https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js
After looking on these example I have the following Chrome App.
manifest.json:
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"permissions": [ "webview" ],
"icons": {
"128": "icon_128.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
}
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
bounds: {
'width': 1050,
'height': 700
}
});
});
window.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<webview src='http://www.google.de' id="xx"></webview>
<script src="main.js"></script>
</body>
</html>
main.js (here is the magic :D)
function updateWebviews() {
var webview = document.querySelector("webview");
webview.style.height = document.documentElement.clientHeight + "px";
webview.style.width = document.documentElement.clientWidth + "px";
};
onload = updateWebviews;
window.onresize = updateWebviews;
Now I have exactly what I want. A webview with fullscreen of a web page:
Edit:
I've also uploaded a git repo on GitHub for see the SourceCode:
https://github.com/StefMa/ChromeAppWebsite
This works for me (within a style element in the HTML obviously):
webview {
display: flex;
height: 100vh;
}
This solution seems to work for me, it's not ideal, but works:
<webview src="https://github.com" style="width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></webview>
This could happen because you are using relative height and width with <!DOCTYPE html>. See this answer for an explanation.
Instead of using 100%, you could try specifying the width and height in pixels.
<webview style="display:block; width:400px; height:600px;" src="http://www.google.de"></webview>
Add this to styles.css
webview{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I'm new to use Kendoui, HTML 5 for web , i have create one small Demo app in html 5,in this i need to change the Theme by dynamically , means when i select the color from Combo-box or Drop-down it should be apply for entire page. I searched in Google but i did not get right solution , please guide me how to do .
Here is the code what fallow sample .
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" typ e="text/css" />
<script src="Scripts/kendo/2013.2.716/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/kendo/2013.2.716/kendo.all.min.js" type="text/javascript"></script>
<style>
html, body
{
margin: 0;
padding: 0;
}
body
{
font: 12px/1.5 Tahoma,sans-serif;
padding: 2em;
}
span.themeChooser
{
float: right;
}
#tree
{
height: 9em;
}
</style>
</head>
<body class="k-content">
<div id="example" class="k-content">
<input class="themeChooser" value="default" />
<div id="tree">
</div>
<p>
Note: in order for the whole page to be styled, the <body> element has a <code>
k-content</code> class.</p>
</div>
<script>
$(function () {
$("#themeChooser").kendoDropDownList({
dataSource: [
{ text: "Black", value: "black" },
{ text: "Blue Opal", value: "blueopal" },
{ text: "Default", value: "default" },
{ text: "Metro", value: "metro" },
{ text: "Silver", value: "silver" }
],
change: function (e) {
var theme = (this.value() || "default").toLowerCase();
changeTheme(theme);
}
});
// sample widget on the page
$("#tree").kendoTreeView({
dataSource: [
{ text: "foo", expanded: true, items: [
{ text: "bar", selected: true }
]
},
{ text: "baz" }
]
});
// loads new stylesheet
function changeTheme(skinName, animate) {
var doc = document,
kendoLinks = $("link[href*='kendo.']", doc.getElementsByTagName("head")[0]),
commonLink = kendoLinks.filter("[href*='kendo.common']"),
skinLink = kendoLinks.filter(":not([href*='kendo.common'])"),
href = location.href,
skinRegex = /kendo\.\w+(\.min)?\.css/i,
extension = skinLink.attr("rel") === "stylesheet" ? ".css" : ".less",
url = commonLink.attr("href").replace(skinRegex, "kendo." + skinName + "$1" + extension),
exampleElement = $("#example");
function preloadStylesheet(file, callback) {
var element = $("<link rel='stylesheet' media='print' href='" + file + "'").appendTo("head");
setTimeout(function () {
callback();
element.remove();
}, 100);
}
function replaceTheme() {
var oldSkinName = $(doc).data("kendoSkin"),
newLink;
if ($.browser.msie) {
newLink = doc.createStyleSheet(url);
} else {
newLink = skinLink.eq(0).clone().attr("href", url);
}
newLink.insertBefore(skinLink[0]);
skinLink.remove();
$(doc.documentElement).removeClass("k-" + oldSkinName).addClass("k-" + skinName);
}
if (animate) {
preloadStylesheet(url, replaceTheme);
} else {
replaceTheme();
}
}
});
</script>
Thank you .