I've just started to learn and use polymer and I've made all the installations and imports as in Google's Polymer website but I still can't make a single polymer element to work. These are the files:
bower.json
{
"name": "take0",
"description": "0.0",
"main": "index.html",
"moduleType": [
"amd"
],
"keywords": [
"polymer"
],
"authors": [
"Balajee"
],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"core-component-page": "Polymer/core-component-page#^0.5",
"core-elements": "Polymer/core-elements#^0.5.6",
"paper-elements": "Polymer/paper-elements#^0.5.6",
"platform": "Polymer/platform#^0.4.2",
"polymer": "Polymer/polymer#^1.3.0"
}
}
Index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>
Take 0 on polymer
</title>
<link rel"import" href="bower_components/polymer/polymer.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- Componenet kicks in-->
<link rel="import" href="components/component-one.html">
</head>
<body>
<component-one>
</component-one>
</body>
</html>
components/component-one.html:
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!-- Component one-->
<dom-module id="component-one">
<style>
paper-button.fancy {
background: green;
color: yellow;
}
paper-button.fancy:hover {
background: lime;
}
</style>
<template>
<h1>{{title}}</h1>
<p>Ready to take you out with polymer!!</p>
<paper-button raised>
Click Me!!</paper-button>
</template>
</dom-module>
<script>
Polymer({
is: "component-one",
properties: {
title: {
type: String,
value: "Hello World!!!"
}
},
ready: function() {
console.log("I'm Working!!!!!")
}
});
</script>
I've spent 2 days of looking for the problem and can't find anything that solves the issue.
The problem here is that you are using Polymer 1.3.0 with elements build for the 'ancient' Polymer 0.5.
Try replacing the dependency part of your bower.json file with this one :
"dependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.0",
"polymer": "Polymer/polymer#^1.3.0"
}
You can see that the core-elements library is replaced by the iron-elements.
To avoid this kind of error, I recommend you to always use the Polymer Elements Catalog to find Google elements (For example here is the paper-button page, use the recommended bower command displayed at the bottom of the menu drawer to import it).
Also, if you find an interesting element on Github or customelements.io, always check it's bower.json to be certain of which Polymer version it is based on.
Related
I am trying to run the jQuery maphilight plugin demo via the Parcel script "scripts":{"start": "parcel docs/demo_world.html"} in the package.json file.
I am using the maphilight demo project downloaded from https://github.com/kemayo/maphilight which works fine using live server, but when I use the Parcel script above I get the following errors in dev tools:
I've just taken the maphilight demo in the link above, run npm i parcel-bundler --save-dev and added the scripts in the package.json file below.
Is this even going to be possible with Parcel? Any info would be greatly appreciated! Thank you.
The full package.json looks like:
{
"name": "maphilight",
"version": "1.4.2",
"title": "maphilight",
"author": {
"name": "David Lynch",
"email": "kemayo#gmail.com",
"url": "http://davidlynch.org"
},
"repository": "https://github.com/kemayo/maphilight.git",
"licenses": [
{
"type": "MIT",
"url": "MIT-LICENSE.txt"
}
],
"dependencies": {
"jquery": "^3.0.0"
},
"scripts": {
"start": "parcel docs/demo_world.html",
"build": "parcel build docs/demo_world.html --public-url.",
"build:archive": "ch5-cli archive -p npm_practice_v1 -d dist -o output"
},
"description": "a plugin that adds visual hilights to image maps",
"keywords": [
"map",
"imagemap",
"hilight",
"highlight",
"jquery-plugin",
"ecosystem:jquery"
],
"homepage": "https://github.com/kemayo/maphilight",
"main": "jquery.maphilight.min.js",
"devDependencies": {
"grunt": "^1.0.4",
"grunt-contrib-jshint": "^2.1.0",
"grunt-contrib-uglify": "^4.0.1",
"grunt-contrib-watch": "^1.1.0",
"parcel-bundler": "^1.12.5"
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery maphilight documentation</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../jquery.maphilight.min.js"></script>
<script type="text/javascript">$(function() {
$('.map').maphilight({fade: false});
});</script>
</head>
<body>...
</body>
</html>
In an extension I'm developing, I set the manifest without the popup page, so that when you click the icon of the app in the browser's toolbar it immediately opens the app's page.
The app's page is index.html and in this page I load the
<script src="background.js"></script> & <script src="./index.js"></script>
The background.js file has the following code to open the index.html page after the click:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.create(
{
active: true,
url: "index.html",
},
null
);
});
also tested with: chrome.tabs.create({ url: chrome.extension.getURL("index.html") }); , but same issue occurs.
The manifest.json file:
"background": {
"page": "index.html",
"persistent": false
},
"browser_action": {
"browser_style": true,
"default_icon": {
"16": "images/icon16.png"
}
},
When I first click the icon, it opens the index.html, ... , but the second time I click the icon it opens 2 index.html files, if I click it again then it opens 4, and so on. It's ok to open another index.html, but just one for each icon click.
What would be the mistake I'm doing?
Thanks in advance, Ken
Try this.
manifest.json
{
"name": "Test",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"./background.js"
]
},
"permissions": [
"tabs"
],
"browser_action": {
}
}
background.js
chrome.browserAction.onClicked.addListener((tab) => {
chrome.tabs.create({
url: chrome.runtime.getURL("./page.html")
});
});
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>extension page</title>
</head>
<body>
<h2>Extension Page</h2>
</body>
</html>
Normally we are link the css with like
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/IndexCss.css" />
</environment>
But can i just link the folder ? Cus have too many css need to link ...
Or any suggustion
ASP.NET Core MVC comes with a built in bundler and minifier so that many CSS files can become one, also does the same for JavaScript files.
Just create a file called bundleconfig.json at the root of the project with content like this:
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"~/lib/bootstrap/dist/css/bootstrap.css",
"~/css/*.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"~/js/*.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
]
More info here:
https://learn.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-2.2&tabs=visual-studio
I am new to Google Chrome Extensions. I have created a button in my extension. With that button I want to redirect the user to another site (like "www.example.com").
I have the following code which I wrote for the redirection, but it doesn't work.
Related question.
manifest.json
{
"name": "Popup ",
"manifest_version": 2,
"version": "0.1",
"description": "Run process on page activated by click in extension popup",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
popup.html
<html>
<head>
<script src="popup.js"></script>
<style type="text/css" media="screen">
body { min-width:250px; text-align: center; }
#click-me { font-size: 15px; }
</style>
</head>
<body>
<button id='click-me'>Click Me!</button>
</body>
</html>
background.js
chrome.extension.onRequest.addListener(function(request, sender) {
chrome.tabs.update(sender.tab.id, {url: request.redirect});
});
popup.js
function clickHandler(e) {
chrome.extension.sendRequest({redirect: "https://www.google.co.in"});
alert("url");
this.close();
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('click-me').addEventListener('click', clickHandler);
})
Do you have any idea why it doesn't work?
If you use background pages, then you need to declare the background script (background.js in your case) in the manifest file:
"background": {
"scripts": [ "background.js" ]
},
Your example will not work though, because sender.tab is only defined if the request came from a tab or content script, not from the popup.
In your example, there is no need for a background page at all, you can just use the chrome.tabs API directly from the popup page:
function clickHandler(e) {
chrome.tabs.update({url: "https://example.com"});
window.close(); // Note: window.close(), not this.close()
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('click-me').addEventListener('click', clickHandler);
});
I want to create an extension that reacts to a click that searches for all the <ul>'s in the page, and surround them with a border. The problem is that the code doesn't work, and clicking on the extension icon doesn't search for anything.
mainfest.json:
{
"name": "My First Extension",
"version": "1.0",
"background_page": "background1.html" ,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs", "http://*/*","https://*/*"
]
}
background1.html:
<!doctype html>
<html>
<head>
<title>Background Page</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script>
function ul_checker(){
$('ul').addClass('ul_style');
$('ul').append('<div class="close">X</div>');
$('.close').addClass('style2');
}
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{code:"ul_checker()"});
});
</script>
</head>
<body>
</body>
</html>
Your extension is of type content script. You will have to specify what scripts will run on the page, see the manifest and description of the official documentation. I assume that you will have to include jquery as a content script :).
Therefore, accordingly to the documentation you will have to add the following in your manifest.json:
"content_scripts": [
{
"js": ["js/jquery-1.3.2.min.js"]
}
],