1. Introduction 2. Implementation 3. Result 4. Experience

1. Introduction

1.1 Overview

uMatrix is a popular Chrome extension aiming at filtering net requests according to source, destination and type, used for protecting privacy, blocking ads, and reduce network traffic. uMatrix requires a set of rules in order to perform its duty. However too many or inefficient rules slow down uMatrix. Thus, one of our advisors built uMatrixCleaner that cleans uMatrix rules. The drawback of uMatrixCleaner is that it's a desktop application, that users have to download it in order to run it. In the age of Web 2.0, we feel we can revise uMatrixCleaner to a web-based application for users all over the world with Internet access to run it.

Users can set rules to clear up the specific websites they do not expect. The aim of our project is building a website to merge the similar rules and delete the useless rules to reduce the complex calculation. Moreover, the CPU usage can be decreased. In our project, we use several technologies such as RESTful API, ASP.NET Web API Core and so on to achieve the goal. We have learned a lot about C# language and JavaScript through completing the task.

1.2 Tools

The realization of uMatrixCleaner application is majorly based on the communication between client side and server side. The function of transfer users' input data to server where the request will be processed is needed. As the selection of framework is vital, ASP.NET Web API Core was deemed to take the role of the back-end technology in building our web application.

With the reason that the original program was written in C# and to adjust to the ASP.NET Web API Core framework, C# was chosen to be used to write the server side code. As for client side, html and JavaScript are main languages to display the interface of our web application. What's more, we use jQuery and ajax to write the post function which pass the data user request to the back end.

Furthermore, RESTful API is kind of Internet software architecture which is most popular nowadays, our web application just utilizes it to make it to be like a software to solve problems. The full name of RESTful API is Representational State Transfer. It is a well-structured, standards-compliant, easy to understand and expand architecture style. Therefore, it is getting applied by more and more websites.

Git is a free and open source distributed version control system we used during the teamwork. The features like cheap local branching, convenient staging areas, and multiple workflows makes us easier to divide the complex work into pieces to members who have the expertise. And help the communication between students and advisor.

2. Implementation

2.1 Client

The purpose of our design is to provide a simple and elegant interface for customers to input parameters and rules. The rule contains 4 parts: the destination URL, URL of the source of the information, the section supposed to be executed and operational instruction (allow or block). The first parameter is to set the threshold for merging similar rules. For example, we assume input rules as:

google.com facebook.com * block

google.com youtube.com * block

google.com twitter.com * block

the default value of the first parameter is 3, so the output will be:

google.com * * block

If 2 is assigned to the threshold:

google.com www.facebook.com script block

google.com login.facebook.com script block

the output will be:

google.com facebook.com script block

The second parameter is to set the rule to randomly remove x percent of user input rules. The default value is 5.

The button in the middle of the last line is the commend button named Clean. If user click the button, the web application begins to work. It will package the two parameters with the input of user, then send them together to server side where the data will be received and calculated. After finish the execution, server will output the result back to client side.

Another property of our web application is that people can do the cleaning job continuously, which means we are supposed to make the output result display just at the same interface with input data, so users may see cleaning result, input parameters and rules without filtered together. At first, we write the commend line as:

<form id="main" method="post" action="/api/Cleaner">

for input data. However, the problem is that the new page will always be shown after clicking "Clean" button. Therefore, we applied for another way to transfer input unprocessed data to the server side. That is JavaScript language with ajax. JavaScript is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. As for ajax, the full name of it is Asynchronous JavaScript And XML. It is a method used in web application development and a technology for creating fast, dynamic web pages. Also, it can update parts of web page without having to reload the entire web page.

2.2 Server

The server side of our website is going to execute the cleaning program to calculate the result of input data. The purpose of uMatrixCleanerOnline is filtering useless rules with the main program written by our leader in DLL (Dynamic Link Library) format. Therefore, the first thing we consider is how to call the dynamic link library file to be used in the back end. As we know, dynamic link library is also known as "application extension", place in the system. When user execute a program, the corresponding DLL file will be called. A DLL file can never run in its own address space, so it always need a host exe to run. Dotnet is a tool for managing .NET source code and binaries. Using dotnet.exe to call our main program uMatrixCleaner.dll in the server side satisfied all conditions we demand. The matter became to be call the dotnet.exe in our program. A method called UsingExe() was created to run the dotnet.exe. After learning tutorials, we found the process.Start() method can be used to accomplish our goal. This method needs the name of the exe file, directory of the exe file, and the instruction to call that exe in cmd. The testing of the instruction was executed in cmd. UsingExe() was finished after put the required information of exe and command line.

3. Result

This is the interface of our web application, users can input parameters in the left three textboxes.

And here are the sample inputs:

After click the Clean button, the filtered rules will be displayed in the right Output textbox.

We also create a Reset button to clean the Output textbox to realize the multi-search function.

We input a new set of data to check if it still works, and it succeed.

4. Experience

We are honored to be selected to attend in this UCLA exchange program. The experience of accomplishing the uMatrixCleaner project enriched our knowledge which we haven't practice in the past or we have not learnt in school yet.

The campus of UCLA has a different style, students have a freer learning atmosphere. So. We are glad to finish our project in such an outstanding place. Our advisors are patient to explain the workflow to us, and helped a lot in finishing the project. We learned the importance of working as a team which can show everyone's strengths, and improve the working efficiency. After finish the project, we went to some attractions in Los Angeles and San Diego which helps us learn more about local culture. Furthermore, during the exchange program in UCLA, we fell the diversity of culture in the campus. As we see, there are students and tourists over the world which indicate that it is a university accepts several kinds of culture. What's more, we tried a lot of typical cuisines which were tasty.