I am trying to develop a simple chrome extension that connects to an existing redux store running in a page in a tab.
I have a helloworld chrome extension running with a v3 manifest.
My html for my popup looks like :
<html>
<head>
<link rel="stylesheet" href="monitor.css">
<script src="chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/redux-devtools-extension.js"></script>
</head>
<body>
<div class='container' >
<div>
<label>Redux Dev Tools</label>
<button id='connect' >Connect</button>
</div>
<div>
<select id='action'>
<option id=1>SIGNED_IN</option>
<option id=1>SIGNED_OUT</option>
<option id=1>FETCH_ALL_BRAND_LINES</option>
</select>
<button id='sendAction' >Dispatch</button>
</div>
</div>
<div class='container'>
<div class='logWindow' id='log'>Log</div>
</div>
<script src="monitor.js"></script>
</body>
</html>
The problem comes from trying to load the js from the redux-devtools plugin.
Refused to load the script
'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/redux-devtools-extension.js'
because it violates the following Content Security Policy directive:
"script-src 'self'"
My manifest file content-security is configured as follows :
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline';"
},
But I am really struggling to understand what I need to do to allow this script to be loaded.
Can anyone suggest what I should try?
Related
You can find full rendered code below jsfiddle.
http://jsfiddle.net/yusufcivir/45dckxLj
<script type="text/html" id="tmpl-media-frame">
<div class="media-frame-menu"></div>
<div class="media-frame-title"></div>
<div class="media-frame-router"></div>
<div class="media-frame-content"></div>
<div class="media-frame-toolbar"></div>
<div class="media-frame-uploader"></div>
</script>
<script type="text/html" id="tmpl-media-modal">
<div tabindex="0" class="media-modal wp-core-ui">
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">Ortam panelini kapat</span></span></button>
<div class="media-modal-content"></div>
</div>
<div class="media-modal-backdrop"></div>
</script>
<script type="text/html" id="tmpl-uploader-window">
<div class="uploader-window-content">
<h1>Yüklemek için dosyaları sürükleyip bırakın</h1>
</div>
</script>
<script type="text/html" id="tmpl-uploader-editor">
<div class="uploader-editor-content">
<div class="uploader-editor-title">Yüklemek için dosyaları sürükleyip bırakın</div>
</div>
</script>
I cant remove it please help me.
This code originates from the "/wp-includes/media-template.php" file starting at around Line 187.
If you are seeing it in the source code of your rendered page, then there is a plugin that is including this file like this wp_enqueue_media();
Options to resolve:
Deactivate the plugin at fault - it was written with lousy code anyway
Edit the plugin at fault so that it does not call the above mentioned media file
I created a new ASP .Net MVC 5 project with all the sample views, controllers and such. It has the latest versions of jQuery and Bootstrap.
So I wanted to have a nice template on it so I downloaded this one and I added the images and css files to the content folder, modified the BundleConfig class so that the new css file is included and also changed _ViewStart.cshtml file so that it takes the new layout which I named _myLayout.cshtml.
Technically it worked very well since all the pages now use the new layout template but it is not rendering properly, the menu looks truncated, the header image and the content section are going outside of the border on the right side, and the footer is displayed with a margin at the bottom which should not exist.
I have been able to pinpoint the problem to a "collision" between the template's css and bootstrap since if I remove the bootstrap stylesheet from the BundleConfig file and then styles got rendered as expected.
I am more of a backend/javascript developer so my knowledge about css is very limited and I am way over my head with this one. So much that I don't even know which code to include and both css files are too large to include them in the question.
If anyone is able to help I would really appreciate it and/or if someone can provide some clues as to which css sections would be useful to include in the post to help pinpoint the problem please let me know.
Thanks in advance.
UPDATE:
To replicate the problem you would have to:
- Download the template I mentioned above
- Create a new ASP .Net MVC 5 project
- Add the images and styles.css file from the template on the project's content folder
- On the project's Shared folder create a new layout page called _myLayout.cshtml
- Do the following changes on these files:
BundleConfig.cs
using System.Web;
using System.Web.Optimization;
namespace SC.Web
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/styles.css"));
}
}
}
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_myLayout.cshtml";
}
_myLayout.cshtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - My ASP.NET Application</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="main">
<!-- start header -->
<div id="header">
<div id="logo">
<h1>metamorph_highway</h1>
<h2>Design by Metamorphosis Design</h2>
</div>
<div id="menu">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
<!-- end header -->
</div>
<hr />
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
#RenderBody()
</div>
<!-- end content -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
<p>Copyright © 2008. Privacy Policy | Terms of Use | <abbr title="eXtensible HyperText Markup Language">XHTML</abbr> | <abbr title="Cascading Style Sheets">CSS</abbr></p>
<p>
Design by Free Site Templates, coded by Free Flash Templates
</p>
</div>
</div>
<!-- end footer -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Turns out that on bootstrap there is this definition:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Since the template I downloaded gets messed up with this I added the following on its own css file:
*{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
I have no idea if later this will cause bootstrap not to behave as it should and if that happens I'll have to deal with that then.
All assemble users who uses layouts knows that "{{> body }}" marks the point of insertion of contents of any page who uses the layout. But is it possible to define multiple points of insertions, instead of tossing everything at where the {{> body }} is?
For instance, in my page I would like to define a specific piece of javascript, but I like that custom javascript to be at the very bottom of the page along with out javascript tags. If it only puts everything where the {{> body }} is, this is not possible, since the script will just be appended to the content.
In other words, it would be useful to have {{> script }} or even customizable tags marking different points of insertion, and in the page using the layout, these tags are specifically defined.
Above is my ideal use case, does anyone know if assemble supports anything like this?
#Xavier_Ex check out the assemble handlebars helper repo https://github.com/assemble/example-layout-helpers
And this particular pull request https://github.com/assemble/handlebars-helpers/pull/75
We added some layout helpers about a month ago that allow you to "extend" a layout and include different content sections. Notice that you'll have to include your layout as a partial in the assemble gruntfile setup for this to work properly...
assemble: {
options: {
flatten: true,
assets: 'docs/assets',
partials: ['src/includes/*.hbs', 'src/layouts/*.hbs'],
layout: false,
data: ['src/data/*.{json,yml}', 'package.json']
},
pages: {
src: 'src/*.hbs',
dest: 'docs/'
}
}
Layout (default.hbs)...
<!DOCTYPE html>
<html lang="en">
<head>
{{#block "head"}}
<meta charset="UTF-8">
<title>{{title}} | {{site.title}}</title>
<link rel="stylesheet" href="{{assets}}/{{stylesheet}}.css">
<link rel="stylesheet" href="{{assets}}/github.css">
{{/block}}
</head>
<body {{#is stylesheet "bootstrap"}}style="padding-top: 40px;"{{/is}}>
{{#block "header"}}
{{! Navbar
================================================== }}
{{> navbar }}
{{/block}}
{{! Subhead
================================================== }}
<header class="{{#is stylesheet "bootstrap"}}jumbotron {{/is}}{{#is stylesheet "assemble"}}masthead {{/is}}subhead">
<div class="container">
<div class="row">
<div class="col col-lg-12">
<h1> DOCS / {{#if title}}{{ uppercase title }}{{else}}{{ uppercase basename }}{{/if}} </h1>
</div>
</div>
</div>
</header>
{{! Page content
================================================== }}
{{#block "body"}}
<div class="container">
<div class="panel panel-docs">
{{> body }}
</div>
</div>
{{/block}}
{{#block "script"}}
<script src="{{assets}}/highlight.js"></script>
<script src="{{assets}}/holder.js"></script>
{{/block}}
</body>
</html>
Some page
{{#extend "default"}}
{{#content "head"}}
<link rel="stylesheet" href="assets/css/home.css" />
{{/content}}
{{#content "body"}}
<h2>Welcome Home</h2>
<ul>
{{#items}}
<li>{{.}}</li>
{{/items}}
</ul>
{{/content}}
{{#content "script"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
Hope this helps.
Hi am using Tapestry 5 to create a planning web application and to get around a spring security issue I have changed the url pattern in org.apache.tapestry5.TapestryFilter from /* to /planning/*
After altering the corresponding urls and file paths in any Java / .tml files accordingly the web application works as itended, however my css stylesheet is no longer being picked up.
I have a Layout.java in a components file and a corresponding Layout.tml, and then a layout.css file in a layout folder in the webapp file (outside of WEB-INF)
The stylesheet is being called in the Layout.java file by #Import(stylesheet="context:layout/layout.css") - this always worked before!
I have tried moving the css file into a planning subdirectry planning/layout/layout.css but this still doesnt seem to make a difference!
Web.xml
<display-name>Planning Tapestry 5 Application</display-name>
<context-param>
<param-name>tapestry.app-package</param-name>
<param-value>com.quartetfs.planning.tapestry</param-value>
</context-param>
<filter>
<filter-name>app</filter-name>
<filter-class>org.apache.tapestry5.TapestryFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>app</filter-name>
<url-pattern>/planning/*</url-pattern>
</filter-mapping>
Layout.java
import org.apache.tapestry5.*;
import org.apache.tapestry5.annotations.*;
import org.apache.tapestry5.ioc.annotations.*;
import org.apache.tapestry5.BindingConstants;
/**
* Layout component for pages of Planning Application.
*/
#Import(stylesheet="context:layout/layout.css")
public class Layout
{
/** The page title, for the <title> element and the <h1> element. */
#Property
#Parameter(required = true, defaultPrefix = BindingConstants.LITERAL)
private String title;
#Property
private String pageName;
#Property
#Parameter(defaultPrefix = BindingConstants.LITERAL)
private String sidebarTitle;
#Property
#Parameter(defaultPrefix = BindingConstants.LITERAL)
private Block sidebar;
#Inject
private ComponentResources resources;
public String getClassForPageName()
{
return resources.getPageName().equalsIgnoreCase(pageName)
? "current_page_item"
: null;
}
public String[] getPageNames()
{
return new String[] { "planning/Index", };// "About", "Contact" }; TODO
}
}
Layout.tml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Concrete
Version : 1.0
Released : 20080825
Description: A Web 2.0 design with fluid width suitable for blogs and small websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1>
<t:pagelink page="planning/index">Project and Resource Planning</t:pagelink>
</h1>
</div>
<div id="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search" style="background: none;">
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
<p class="legal">
©2009 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
You should not have to move the layout.css file; if Tapestry can't find it, then it will throw an exception when loading the pages containing the Layout component.
When you have a problem like this, it is very useful to view the source of the rendered page, and see what the requests and reponses are.
I suspect that the URL for the stylsheet is coming out as "/assets/..." ... which is not picked up by Tapestry (due to how your filter mapping is set up), and you'll see a 404 error.
It is necessary to inform Tapestry that you have placed the application in a sub-folder (alas, the Servlet API does not provide introspection into how you have things configured in your web.xml).
http://tapestry.apache.org/configuration.html#Configuration-tapestry.applicationfolder
Once Tapestry knows the application folder, it can build proper URLs.
I am trying to use a dojo datagrid in a dojo dialog and I get the following dojo/parse error when trying to load the page.
dojo/parser::parse() error (new TypeError("d(...) is undefined", "http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox//grid/DataGrid.js", 16))
If I comment out the require DataGrid statement, the parse error goes away. Notice I am not even trying to create a data grid yet. Just trying to build a bare bones page.
The following is the code for the page.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dojo Dialog with DataGrid</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
<!-- load dojo and provide config via data attribute -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
require(["dojo/parser", "dijit/Dialog", "dijit/form/Button"]);
require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/array",
"dojo/_base/lang",
"dojox/grid/_CheckBoxSelector",
"dojo/domReady!",
]);
//var grid2x;
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog"
execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
<div class="dijitDialogPaneContentArea">
</div>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit" onClick="return myFormDialog.isValid();">
OK
</button>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.hide()">
Cancel
</button>
</div>
</div>
<p>When pressing this button the dialog will popup:</p>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.show();">
Show me!
</button>
</body>
</html>
Even though this post is old, your problem seems to be the comma after "dojo/domReady!," There should be no comma after the last import. Also load all that you want to load in the first require i.e instead of having <script>
require(["dojo/parser", "dijit/Dialog", "dijit/form/Button"]);
require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/array",
"dojo/_base/lang",
"dojox/grid/_CheckBoxSelector",
"dojo/domReady!",
]);
//var grid2x;
</script>
Just put all in one require as follows:
<script>
require(["dojo/parser",
"dijit/Dialog",
"dijit/form/Button",
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/array",
"dojo/_base/lang",
"dojox/grid/_CheckBoxSelector",
"dojo/domReady!"]);
//var grid2x;
</script>
problem is <html lang="en">. parser can't parse html components if lang="en". Remove it or override with data-dojo-config="lang='en-us'"