This commit is contained in:
Peter Snyder 2017-10-14 13:52:56 -05:00
parent f0424dcbdd
commit b87002c7a1
8 changed files with 88 additions and 24 deletions

View file

@ -1,3 +1,7 @@
body { body {
width: 800px; min-width: 800px;
}
.list-group-item .badge a {
color: white;
} }

View file

@ -10,16 +10,26 @@
<link href="css/bootstrap-theme.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet">
</head> </head>
<body> <body>
<header>
</header>
<section class="container"> <section class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<p>
Enter regular expressions on the right, to create a new
blocking rule. On the right, select which functionality
should be blocked for hosts matching each regular expression.
</p>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-xs-4 col-md-4 well"> <div class="col-xs-4 col-md-4 well">
<domain-rules :domain-names="domainNames" :selected-domain="selectedDomain"></domain-rules> <domain-rules :domain-names="domainNames" :selected-domain="selectedDomain"></domain-rules>
</div> </div>
<div class="col-xs-7 col-md-7 col-md-offset-1 col-xs-offset-1"> <div class="col-xs-8 col-md-8">
<web-api-standards :standards="standards" :selected-standards="selectedStandards"></web-api-standards> <web-api-standards :standards="standards"
:selected-standards="selectedStandards"
:selected-domain="selectedDomain">
</web-api-standards>
</div> </div>
</div> </div>
</section> </section>

View file

@ -5,11 +5,17 @@
const standardsDefaults = window.WEB_API_MANAGER.defaults; const standardsDefaults = window.WEB_API_MANAGER.defaults;
Vue.component("web-api-standards", { Vue.component("web-api-standards", {
props: ["standards", "selectedStandards"], props: ["standards", "selectedStandards", "selectedDomain"],
template: ` template: `
<div class="web-api-standards-container"> <div class="web-api-standards-container">
<div class="form-horizontal"> <h3>Pattern: <code>{{ selectedDomain }}</code></h3>
<div class="form-group">
<div class="panel panel-default form-horizontal">
<div class="panel-heading">
Default configurations
</div>
<div class="panel-body">
<button @click="onConservativeClicked"> <button @click="onConservativeClicked">
Use Conservative Settings Use Conservative Settings
</button> </button>
@ -18,15 +24,23 @@
</button> </button>
</div> </div>
</div> </div>
<div class="checkbox" v-for="standard in standards">
<label> <div class="panel panel-default">
<input type="checkbox" <div class="panel-heading">Blocked standards</div>
:value="standard.info.idenitifer"
v-model="selectedStandards" <ul class="list-group">
@change="onStandardChecked"> <li class="list-group-item" v-for="standard in standards">
{{ standard.info.idenitifer }} <span v-if="standard.info.url" class="badge">
<a href="{{ standard.info.url }}" v-if="standard.info.url">[info]</a> <a href="{{ standard.info.url }}">info</a>
</label> </span>
<input type="checkbox"
:value="standard.info.idenitifer"
v-model="selectedStandards"
@change="onStandardChecked">
{{ standard.info.idenitifer }}
</li>
</ul>
</div> </div>
</div> </div>
`, `,

View file

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "WebAPI Manager", "name": "WebAPI Manager",
"version": "0.4", "version": "0.5",
"description": "Improves browser security by restricting page access to parts of the Web API.", "description": "Improves browser security by restricting page access to parts of the Web API.",
"icons": { "icons": {
"48": "images/uic-48.png", "48": "images/uic-48.png",
@ -46,7 +46,7 @@
"lib/storage.js", "lib/storage.js",
"lib/URI.js", "lib/URI.js",
"content_scripts/dist/standards.js", "content_scripts/dist/standards.js",
"background_scripts/bootstrap.js" "background_scripts/background.js"
] ]
}, },
"options_ui": { "options_ui": {

7
popup/css/popup.css Normal file
View file

@ -0,0 +1,7 @@
body, html {
min-width: 320px;
}
section .row {
margin-bottom: 1em;
}

View file

@ -1,5 +1,14 @@
/*jslint es6: true*/
/*global window*/
(function () { (function () {
const rootObject = window.browser || window.chrome; const rootObject = window.browser || window.chrome;
const configureButton = window.document.getElementById("config-page-link");
configureButton.addEventListener("click", function (event) {
rootObject.runtime.openOptionsPage();
event.preventDefault();
event.stopImmediatePropagation();
}, false);
rootObject.tabs.executeScript( rootObject.tabs.executeScript(
{ {
@ -20,9 +29,13 @@
const liElm = document.createElement("li"); const liElm = document.createElement("li");
liElm.className = "list-group-item"; liElm.className = "list-group-item";
if (domainRule !== "(default)") {
liElm.className += " list-group-item-success";
}
const spanElm = document.createElement("span"); const spanElm = document.createElement("span");
spanElm.className = "badge"; spanElm.className = "badge";
const badgeText = document.createTextNode(domainRule); const badgeText = document.createTextNode(domainRule);
spanElm.appendChild(badgeText); spanElm.appendChild(badgeText);
liElm.appendChild(spanElm); liElm.appendChild(spanElm);

View file

@ -7,14 +7,30 @@
<title>Frame listing popup</title> <title>Frame listing popup</title>
<link href="../config/css/bootstrap.min.css" rel="stylesheet"> <link href="../config/css/bootstrap.min.css" rel="stylesheet">
<link href="../config/css/bootstrap-theme.min.css" rel="stylesheet"> <link href="../config/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/popup.css" rel="stylesheet">
</head> </head>
<body> <body>
<section> <header class="container">
This page has loaded the followng frames… <div class="row">
<ul class="list-group"> <div class="col-xs-12">
</ul> <h2>Blocking Rules</h2>
</div>
</div>
</header>
<section class="container">
<div class="row">
<div class="col-xs-12">
<p>The following origins are execiting code on this page.</p>
<ul class="list-group">
</ul>
<button type="button" id="config-page-link" class="btn btn-default btn-block">
Configure blocking rules
</button>
</div>
</div>
</section> </section>
<script src="js/example.js"></script> <script src="js/popup.js"></script>
</body> </body>
</html> </html>