exception has been thrown by the target of an invocation
//برای ذخیره مقادیر از ساختار نام و مقدار استفاده می‌کنیم که نام‌ها را اینجا ثبت کرده ام
var Variables={
posts:"posts",
postsComments:"postsComments",
shares:"shares",
sharesComments:"sharesComments",
}
//برای ذخیره زمان آخرین تغییر سایت برای هر یک از مطالب به صورت جداگانه نیاز به یک ساختار نام و مقدار است که نام‌ها را در اینجا ذخیره کرده ام
var DateContainer={
posts:"dtposts",
postsComments:"dtpostsComments",
shares:"dtshares",
sharesComments:"dtsharesComments",
interval:"interval"
}
//برای نمایش پیام‌ها به کاربر
var Messages={
SettingsSaved:"تنظیمات ذخیره شد",
SiteUpdated:"سایت به روز شد",
PostsUpdated:"مطلب ارسالی جدید به سایت اضافه شد",
CommentsUpdated:"نظری جدیدی در مورد مطالب سایت ارسال شد",
SharesUpdated:"اشتراک جدید به سایت ارسال شد",
SharesCommentsUpdated:"نظری برای اشتراک‌های سایت اضافه شد"
}
//لینک‌های فید سایت
var Links={
postUrl:"https://www.dntips.ir/feeds/posts",
posts_commentsUrl:"https://www.dntips.ir/feeds/comments",
sharesUrl:"https://www.dntips.ir/feed/news",
shares_CommentsUrl:"https://www.dntips.ir/feed/newscomments"
}
//لینک صفحات سایت
var WebLinks={
Home:"https://www.dntips.ir",
postUrl:"https://www.dntips.ir/postsarchive",
posts_commentsUrl:"https://www.dntips.ir/commentsarchive",
sharesUrl:"https://www.dntips.ir/newsarchive",
shares_CommentsUrl:"https://www.dntips.ir/newsarchive/comments"
} chrome.runtime.onInstalled.addListener(function(details) {
var now=String(new Date());
var params={};
params[Variables.posts]=true;
params[Variables.postsComments]=false;
params[Variables.shares]=false;
params[Variables.sharesComments]=false;
params[DateContainer.interval]=1;
params[DateContainer.posts]=now;
params[DateContainer.postsComments]=now;
params[DateContainer.shares]=now;
params[DateContainer.sharesComments]=now;
chrome.storage.local.set(params, function() {
if(chrome.runtime.lastError)
{
/* error */
console.log(chrome.runtime.lastError.message);
return;
}
});
}); chrome.storage.local.set('mykey':myvalue,.... chrome.storage.local.set(mykey:myvalue,...
"background": {
"scripts": ["const.js","init.js"]
} نکته:نمی توان در تعریف بک گراند هم فایل اسکریپت معرفی کرد و هم فایل html
"background": {
"page": "background.htm"
} <html>
<head>
<script type="text/javascript" src="const.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="init.js"></script>
<script type="text/javascript" src="omnibox.js"></script>
<script type="text/javascript" src="rssreader.js"></script>
<script type="text/javascript" src="contextmenus.js"></script>
</head>
<body>
</body>
</html> "content_security_policy": "script-src 'self' https://*.google.com; object-src 'self'"
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
google.load("feeds", "1");
google.setOnLoadCallback(alarmManager); function alarmManager()
{
chrome.storage.local.get(DateContainer.interval,function ( items) {
period_time==items[DateContainer.interval];
chrome.alarms.create('RssInterval', {periodInMinutes: period_time});
});
chrome.alarms.onAlarm.addListener(function (alarm) {
console.log(alarm);
if (alarm.name == 'RssInterval') {
var boolposts,boolpostsComments,boolshares,boolsharesComments;
chrome.storage.local.get([Variables.posts,Variables.postsComments,Variables.shares,Variables.sharesComments],function ( items) {
boolposts=items[Variables.posts];
boolpostsComments=items[Variables.postsComments];
boolshares=items[Variables.shares];
boolsharesComments=items[Variables.sharesComments];
chrome.storage.local.get([DateContainer.posts,DateContainer.postsComments,DateContainer.shares,DateContainer.sharesComments],function ( items) {
var Vposts=new Date(items[DateContainer.posts]);
var VpostsComments=new Date(items[DateContainer.postsComments]);
var Vshares=new Date(items[DateContainer.shares]);
var VsharesComments=new Date(items[DateContainer.sharesComments]);
if(boolposts){var result=RssReader(Links.postUrl,Vposts,DateContainer.posts,Messages.PostsUpdated);}
if(boolpostsComments){var result=RssReader(Links.posts_commentsUrl,VpostsComments,DateContainer.postsComments,Messages.CommentsUpdated); }
if(boolshares){var result=RssReader(Links.sharesUrl,Vshares,DateContainer.shares,Messages.SharesUpdated);}
if(boolsharesComments){var result=RssReader(Links.shares_CommentsUrl,VsharesComments,DateContainer.sharesComments,Messages.SharesCommentsUpdated);}
});
});
}
});
} function RssReader(URL,lastupdate,datecontainer,Message) {
var feed = new google.feeds.Feed(URL);
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function (result) {
if(result!=null)
{
var strRssUpdate = result.xmlDocument.firstChild.firstChild.childNodes[5].textContent;
var RssUpdate=new Date(strRssUpdate);
if(RssUpdate>lastupdate)
{
SaveDateAndShowMessage(datecontainer,strRssUpdate,Message)
}
}
});
} var strRssUpdate = result.xmlDocument.firstChild.firstChild.childNodes[5].textContent;
function SaveDateAndShowMessage(DateField,DateValue,Message)
{
var params={
}
params[DateField]=DateValue;
chrome.storage.local.set( params,function(){
var options={
type: "basic",
title: Messages.SiteUpdated,
message: Message,
iconUrl: "icon.png"
}
chrome.notifications.create("",options,function(){
chrome.notifications.onClicked.addListener(function(){
chrome.tabs.create({'url': WebLinks.Home}, function(tab) {
});
});
});
});
} "permissions": [
"storage",
"tabs",
"alarms",
"notifications"
] chrome.notifications.create("",options,function(){
chrome.notifications.onClicked.addListener(function(){
chrome.tabs.create({'url': WebLinks.Home}, function(tab) {
});});
}); "web_accessible_resources": [
"icon.png"
] 
"options_page": "popup.html"
"chrome_url_overrides": {
"newtab": "newtab.htm"
} "devtools_page": "devtools.htm"
<script src="devtools.js"></script>
chrome.devtools.panels.create(
"Dotnettips Updater Tools",
"icon.png",
"devtoolsui.htm",
function(panel) {
}
); 
window.addEventListener("load", function() {
chrome.extension.sendMessage({
type: "dom-loaded",
data: {
myProperty : "value"
}
});
}, true); chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.type) {
case "dom-loaded":
alert(request.data.myProperty );
break;
}
return true;
}); var port = chrome.runtime.connect({name: "my-channel"});
port.postMessage({myProperty: "value"});
port.onMessage.addListener(function(msg) {
// do some stuff here
}); chrome.runtime.onConnect.addListener(function(port) {
if(port.name == "my-channel"){
port.onMessage.addListener(function(msg) {
// do some stuff here
});
}
}); 
آپلود نهایی کار در Google web store
برای آپلود نهایی کار به google web store که در آن تمامی برنامه‌ها و افزونه‌های کروم قرار دارند بروید. سمت راست آیکن تنظیمات را بزنید و گزینه developer dashboard را انتخاب کنید تا صفحه‌ی آپلود کار برای شما باز شود. دایرکتوری محتویات اکستنشن را zip کرده و آپلود نمایید. توجه داشته باشید که محتویات و سورس خود را باید آپلود کنید نه فایل crx را. بعد از آپلود موفقیت آمیز، صفحه‌ای ظاهر میشود که از شما آیکن افزونه را در اندازه 128 پیکسل میخواهد بعلاوه توضیحاتی در مورد افزونه، قیمت گذاری که به طور پیش فرض به صورت رایگان تنظیم شده است، لینک وب سایت مرتبط، لینک محل پرسش و پاسخ برای افزونه، اگر لینک یوتیوبی در مورد افزونه دارید، یک شات تصویری از افزونه و همینطور چند تصویر برای اسلایدشو سازی که در همان صفحه استاندارد آن‌ها را توضیح میدهد و در نهایت گزینه‌ی جالب‌تر هم اینکه اکستنشن شما برای چه مناطقی تهیه شده است که متاسفانه ایران را ندیدم که میتوان همه موارد را انتخاب کرد. به خصوص در مورد ایران که آی پی‌ها هم صحیح نیست، انتخاب ایران چنان تاثیری ندارد و در نهایت گزینه‌ی publish را می‌زنید که متاسفانه بعد از این صفحه درخواست می‌کند برای اولین بار باید 5 دلار آمریکا پرداخت شود که برای بسیاری از ما این گزینه ممکن نیست.
سورس پروژه را می‌توانید از اینجا ببینید و خود افزونه را از اینجا دریافت کنید.
> create-react-app state-management-with-mobx-part4 > cd state-management-with-mobx-part4
> npm install --save bootstrap mobx mobx-react mobx-react-devtools mobx-state-tree
> npm install --save-dev babel-eslint customize-cra eslint eslint-config-react-app eslint-loader eslint-plugin-babel eslint-plugin-css-modules eslint-plugin-filenames eslint-plugin-flowtype eslint-plugin-import eslint-plugin-no-async-without-await eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-redux eslint-plugin-redux-saga eslint-plugin-simple-import-sort react-app-rewired typescript
const products = [
{
id: 1,
name: "Item 1",
price: 850
},
{
id: 2,
name: "Item 2",
price: 900
},
{
id: 3,
name: "Item 3",
price: 1500
},
{
id: 4,
name: "Item 4",
price: 1000
}
];
export default products; 
import React from "react";
import products from "../services/productsService";
const ShopItemsList = ({ onAdd }) => {
return (
<table className="table table-hover">
<thead className="thead-light">
<tr>
<th>Name</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{products.map(product => (
<tr key={product.id}>
<td>{product.name}</td>
<td>{product.price}</td>
<td>
<button
className="btn btn-sm btn-info"
onClick={() => onAdd(product)}
>
Add
</button>
</td>
</tr>
))}
</tbody>
</table>
);
};
export default ShopItemsList; 
import React from "react";
const BasketItemsList = ({ items, totalPrice, onRemove }) => {
return (
<>
<table className="table table-hover">
<thead className="thead-light">
<tr>
<th>Name</th>
<th>Price</th>
<th>Count</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{items.map(item => (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.price}</td>
<td>{item.count}</td>
<td>
<button
className="btn btn-sm btn-danger"
onClick={() => onRemove(item.id)}
>
Remove
</button>
</td>
</tr>
))}
<tr>
<td align="right">
<strong>Total: </strong>
</td>
<td>
<strong>{totalPrice}</strong>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</>
);
};
export default BasketItemsList; const BasketItemsList = ({ items, totalPrice, onRemove }) => { 
import React, { Component } from "react";
class BasketItemsCounter extends Component {
render() {
const { count, onRemoveAll } = this.props;
return (
<div>
<h1>Total items: {count}</h1>
<button
type="button"
className="btn btn-sm btn-danger"
onClick={() => onRemoveAll()}
>
Empty Basket
</button>
</div>
);
}
}
export default BasketItemsCounter; import React, { Component } from "react";
import BasketItemsCounter from "./components/BasketItemsCounter";
import BasketItemsList from "./components/BasketItemsList";
import ShopItemsList from "./components/ShopItemsList";
class App extends Component {
render() {
return (
<main className="container">
<div className="row">
<BasketItemsCounter />
</div>
<hr />
<div className="row">
<h2>Products</h2>
<ShopItemsList />
</div>
<div className="row">
<h2>Basket</h2>
<BasketItemsList />
</div>
</main>
);
}
}
export default App; 
import { action, observable } from "mobx";
export default class CounterStore {
@observable totalNumbersInBasket = 0;
constructor(rootStore) {
this.rootStore = rootStore;
}
@action
increase = () => {
this.totalNumbersInBasket++;
};
@action
decrease = () => {
this.totalNumbersInBasket--;
};
} import { action, computed, observable } from "mobx";
export default class MarketStore {
@observable basketItems = [];
constructor(rootStore) {
this.rootStore = rootStore;
}
@action
add = product => {
const selectedItem = this.basketItems.find(item => item.id === product.id);
if (selectedItem) {
selectedItem.count++;
} else {
this.basketItems.push({
...product,
count: 1
});
}
this.rootStore.counterStore.increase();
};
@action
remove = id => {
const selectedItem = this.basketItems.find(item => item.id === id);
selectedItem.count--;
if (selectedItem.count === 0) {
this.basketItems.remove(selectedItem);
}
this.rootStore.counterStore.decrease();
};
@action
removeAll = () => {
this.basketItems = [];
this.rootStore.counterStore.totalNumbersInBasket = 0;
};
@computed
get totalPrice() {
return this.basketItems.reduce((previous, current) => {
return previous + current.price * current.count;
}, 0);
}
} import CounterStore from "./counter";
import MarketStore from "./market";
class RootStore {
counterStore = new CounterStore(this);
marketStore = new MarketStore(this);
}
export default RootStore; export default class MarketStore {
@observable basketItems = [];
constructor(rootStore) {
this.rootStore = rootStore;
}
@action
removeAll = () => {
this.basketItems = [];
this.rootStore.counterStore.totalNumbersInBasket = 0;
};
} import "./index.css";
import "bootstrap/dist/css/bootstrap.css";
import makeInspectable from "mobx-devtools-mst";
import { Provider } from "mobx-react";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import RootStore from "./stores";
const rootStore = new RootStore();
if (process.env.NODE_ENV === "development") {
makeInspectable(rootStore); // https://github.com/mobxjs/mobx-devtools
}
ReactDOM.render(
<Provider {...rootStore}>
<App />
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister(); <Provider counterStore={rootStore.counterStore} marketStore={rootStore.marketStore}> import { inject, observer } from "mobx-react";
import React from "react";
import products from "../services/productsService";
const ShopItemsList = ({ onAdd }) => {
return (
// ...
);
};
export default inject(({ marketStore }) => ({
onAdd: marketStore.add
}))(observer(ShopItemsList)); import { inject, observer } from "mobx-react";
import React from "react";
const BasketItemsList = ({ items, totalPrice, onRemove }) => {
return (
// ...
);
};
export default inject(({ marketStore }) => ({
items: marketStore.basketItems,
totalPrice: marketStore.totalPrice,
onRemove: marketStore.remove
}))(observer(BasketItemsList)); import { inject, observer } from "mobx-react";
import React, { Component } from "react";
@inject(rootStore => ({
count: rootStore.counterStore.totalNumbersInBasket,
onRemoveAll: rootStore.marketStore.removeAll
}))
@observer
class BasketItemsCounter extends Component {
render() {
const { count, onRemoveAll } = this.props;
return (
// ...
);
}
}
export default BasketItemsCounter; How a single line of code brought down a half-billion euro rocket launch
How to make the fastest .NET Serializer with .NET 7 / C# 11, case of MemoryPack
The best parts of Windows 11 are already in Windows 10. Here's how to enable them
How Microsoft crushed Slack
And why the era of worker-centered work tools may be over
