How to use python program for a web extension? - javascript

I am making a simple web extension. I want to attach a python program to its files so that the python program can use the data entered by the user in the extension popup for a particular operation and the output will be displayed on the extension popup.
Please guide me in this process. It's my first time making a web extension.

I don't think you can execute python script inside javascript file.
these are two option you can use:-
create api with python script and call api inside you javascript file.
explore pyscript , Pyscript is used for using python script inside html code.(I have not tried it yet)

You can use PyScript to write your entire extension with Python.
Take a look at this simple example of running python and DOM manipulating:
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<style>
h1 {
font-size: 20px;
color: green;
text-transform: uppercase;
text-align: center;
margin: 0 0 35px 0;
text-shadow: 0px 1px 0px #f2f2f2;
}
</style>
</head>
<body>
<h1>PyScript Events</h1>
<div>
<p> I am just a random element </p>
<p id="change_me"> I think PyScript is awesome </p>
<p> I like hamburgers </p>
</div>
<py-script>
import pyodide
def on_click(e):
e.target.innerHTML = "PyScript is really awesome!"
change_me_element = document.getElementById('change_me')
change_me_element.addEventListener('click', pyodide.create_proxy(on_click))
</py-script>
</body>
Here you have a great tutorial about getting started with PyScript.

Related

Check to see if the user's browser does not support javascript without <noscript>

I wanted to make my website display something if they don't use JavaScript. I know you could use the <noscript> tag but if I have CSS on my page I want it to clear my CSS so you could read the text.
function test()
{
alert("you are using javascript!");
}
body
{
background-color:#200;
}
<input type="button" value="Click Me with JavaScript" onClick="test()">
<noscript>You liar! You don't have JavaScript!</noscript>
The easiest thing to do is create a small css file to have the noscript CSS, like below. Note you can style the text as you want. This is just an example. You can even add your css that you want to run only in no script environment in this sheet
body:before{
content: 'Please turn on Javascript';
color: white;
font-family: sans-serif;
font-size: 2em;
font-weight: bold;
text-align: center;
width: 100%;
padding: 1em 0;
background: rgba(0,0,0,0.9);
}
Then add the following HTML
<noscript>
<link rel="stylesheet" type="text/css" href="noscript.css">
</noscript>

Why does the console log an operation that occurs after the statement? JS and DOM

I'm trying to learn how to manipulate the DOM with JS and while messing around I console logged the h1 elements I wanted to change. I noticed that when I console logged the elements it said their innerHTML and textContent was the same value as what I changed it to after the console log statements.
Why does the console log statement reflect future changes I made to the h1 elements?
Here's my JS code
var allh1 = document.querySelectorAll("h1")
console.log(allh1); //innerHTML and textContent both listed as "now all h1's are changed here"
for (var i = 0; i < allh1.length; i++) {
allh1[i].textContent = "Now all h1's are changed"; //I gave them that textContent in this line
}
Here's my HTML
<html>
<head>
<meta charset="utf-8">
<title>Getting started with jQuery</title>
<style>
body {
font-family: Arial, sans-serif;
color: rgb(16, 10, 102);
}
</style>
</head>
<body>
<h1 id="heading">What is jQuery?</h1>
<p>jQuery is the most popular JavaScript library. It gives developers lots of useful functions so they can make their webpage interactive across multiple browsers.</p>
<p class="note">jQuery is an open source library with a big community of contributors.</p>
<h1>Why should you learn jQuery?</h1>
<p>If you learn jQuery, you'll be able to use it in your own webpages, understood other developer's webpages, and have a better understanding generally about how to use libraries.</p>
<p class="note">Note: jQuery functions use the DOM API (like <code>document.getElementById</code>). You should learn that first, if you haven't yet.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_and_vanilla_js_here.js"></script>
</body>
</html>

Content with CKEDITOR is incorrectly displayed

i get source code, in CKEDITOR demo, and put in index.html in empty body.
Included:
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
But, content dispayed very bad, appears ugly in style and displayed.
<html>
<head>
<script src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
</head>
<body>
---Content source in CKEDITOR demo HERE
</body>
</html>
displayed:
http://i.stack.imgur.com/ATTWO.png
why it is displayed not as in a demo as it is correct to me to display content created through CKEDITOR
I took a look at their homepage and downloaded the basic package. I
found a file called content.css in the package folder,
img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
And if you look at the source code of the content snippet on their demo,
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="http://c.cksource.com/a/1/img/sample.jpg" /> Apollo 11</h1>
The image has a class called right, which is defined in content.css, and therefore it is floating to the right.
I think your problem is that the css file in not present/found in your project.
Maybe you can try to download the package and see if it works locally, so you can make sure that the problem is caused by the CDN and the missing file.
Just in case, I download the package here (no advertisements intended)
http://ckeditor.com/download
It is rendered by the browser in this way. If you want to add additional styles and modify the look you need to learn some CSS. There is no CSS whatsoever in the source from the editor.

Retrieving the actual DOM/css state of a web page through javascript

As you know, a web page is the union of a html file, one or more css files and one or more javascript files: the first two elements are parsed by the browser to generate the DOM and other data structures useful for the rendering of the page .
Javascript files are executed by an engine, and they can change the value of the DOM or of the data structures related to css, so that, after the execution of a javascript, the "actual status" of a web page can be different from what was statically described by the original html and css code.
I need to develop a firefox add-on that grabs the "actual status" of a web page and stores it to disk, as a couple html + css file.
For the html file is quite easy, i need to serialize the DOM. My concerns are about the css: I can traverse the DOM and for each element get its stylesheet, but it will be
extremely slow and produces a not optimized css code.
Let's make an example
I have this html code:
<html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type='text/javascript' src="changebackground.js" > </script>
</head>
<body>
<div class="divclass" >
<form>
<h2>click to change the background</h2>
<input type="button" value="version" onclick="changebg()" />
</form>
</div>
</body>
Style.css has this definitions:
.divclass{
margin: .5in;
height: 400px;
}
body{
background-color: white;
color: blueviolet;
}
and changebackground has this code:
function changebg() {
document.body.style.backgroundColor = 'black';
}
Obviously, after clicking the button the background's color becomes black.
My goal is to write an add-on that , after this change, gives me back the css with the style's modification, i.e.:
.divclass{
margin: .5in;
height: 400px;
}
body{
background-color: black;
color: blueviolet;
}
Any ideas?
You don't actually need to traverse anything. Inline styles are already part of the, so you get that for free, e.g.:
elem.style.width = "100px";
elem.outerHTML == '<elem style="width: 100px;>";
So to produce a "dump" of the current DOM, incl. inline styles, etc. do:
var html = document.documentElement.outerHTML;
You may also want to serialize document.doctype.
In the unlikely event that a script actually messes with external stylesheets (<link rel="stylesheet">, you may do something like what I described in "Get text of a modified stylesheet" to get the current set of rules. Again, inline styles (<style> and style= attributes) are already present in .outerHTML.
EDIT: What you ask now is not possible, because this is not how inline styles work.
Consider the following html fragment:
<div>first div</div>
<div>second div</div>
Now the following code runs:
document.querySelector("div").style.background = "black";
This will cause the first div to have an inline style:
<div style="background: none repeat scroll 0% 0% black;">first div</div>
<div>second div</div>
Demo Fiddle
How would that rule look like? div { background: black; } is obviously wrong, as this would affect all divs.
You could generate new classes and/or ids, but then you need to manipulate and store the DOM, and could have used my original answer in the first place.

UI suggestions on how to display suggested tags for a given text to a user?

I am writing a web-app that uses a tagging system to organize the user's submitted reports. Part of it uses ajax to get suggestions for tags to present to the user based on the content of their report. I am looking for suggestions on how to present this information for the user.
I'm not quite certain what a friendly way to do this would be.
Edit:
Well, most of the responses here seem to be focused on the user typing in keywords. The idea I'm trying to define here is more towards presenting the user a set of suggested keywords that they may accept or decline without having to type a tag in manually. (That option is of course still available to them)
--------------------------- # say they can checkoff or select tags they like.
| o[tag2] x[foo] o[moo] |
| x[tag1] o[bar] |
---------------------------
If I understand what you're asking, jQueryUI includes an autocomplete widget that does this.
See the working demo here: http://jsbin.com/ezifi
You can modify how the suggestions are presented by monkey-patching the render functions on the autocomplete widget.
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script class="jsbin" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<style type="text/css" media="screen">
h1 { font-size: 20pt; color:Navy; }
h2 { font-size: 18pt; font-weight:bold; color: #DDD; }
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
body { margin:0; padding:0; height:100%;}
.ui-widget { font-size: 0.8em; line-height:0.6em; }
.ui-widget .ui-widget { font-size: 0.7em; }
div.inputDiv {
float: left;
width: 42%;
height: 400px;
min-height: 100%;
border: Navy 1px dotted;
margin: 14px;
padding: 10px;
}
</style>
</head>
<body>
<div class='inputDiv'>
<h1>jQueryUI Autocomplete demo</h1>
<p>Type a few characters of a word</p>
<form action="jquery" id="form1">
<input type="text" id="input1"/>
</form>
</div>
<div id='msgs' class="inputDiv" style='font-size:10pt;font-weight:normal;'>
</div>
</body>
</html>
The Google method is one option: an input textbox with suggestions listed drop-box style underneath.
del.icio.us does it well. They present a list of related tags below a text input into which the user can enter their own tags. Clicking a suggested tag from the list adds it to the input. Nice and simple.
With tags, people are likely going to want to add more than one at a time, so having them exposed right off the bat is helpful.
Some other considerations that might factor into your decision:
How many tags will you suggest at any given time? 2? 5? 10? 50?
Should the user be forced to use your suggested tags only? Is entering their own a valid option?

Categories